Rectangle

Rectangle is the only shape existing in Canvas that can be stroked and filled immediately. All others are paths and require stroke/fill functions for actual drawing.

Rectangle is positioned with x and y parameters, and is sized with width and height parameters.

Functions:

• clearRect(x, y, width, height) - clears rectangular area of the Canvas. The cleared rectangle becomes transparent.
• fillRect(x, y, width, height) - draws a filled rectangle. The filling is according to the fillStyle property. If fillStyle is not specified, black rectangle is drawn.
• strokeRect(x, y, width, height) - draws the outline of a rectangle, without filling it. The stroke is according to the strokeStyle property. If strokeStyle is not specified, black outline is drawn.
• rect(x, y, width, height) - creates a path for a rectangle.The rectangle is not drawn. You can draw this rectangle by fill or stroke functions.

Properties:

• fillStyle - specifies the color or style to use inside shapes. The default is #000 (black). Can be Color, Gradient or Pattern. In this demo we use color only. Any CSS color can be used.
• strokeStyle - specifies the color or style to use for the lines around shapes. The default is #000 (black). "You can set the line width of the stroked rectangle using the lineWidth property.

To Do

Try the following options:

1. Using clearRect

   ctx.clearRect(0, 0, Canvas.width, Canvas.height);
   ctx.fillRect(25,25,100,100);
   ctx.clearRect(45,45,60,60);
   ctx.strokeRect(50,50,50,50);

2. Various lineJoin and lineWidth

    ctx.lineWidth = "3";
    ctx.strokeStyle = "red";
    ctx.strokeRect(5, 5, 200, 250);
    ctx.lineWidth = "25";
    ctx.lineJoin = "bevel";
    ctx.strokeStyle = "blue";
    ctx.strokeRect(50, 200, 300, 150);
    ctx.lineJoin = "round";
    ctx.lineWidth = "45";
    ctx.strokeStyle = "green";
    ctx.strokeRect(150, 50, 150, 250);   

3. Nested rectangles

   ctx.fillStyle='rgb(0,0,255)';
   ctx.fillRect(0,0,400,400);
   ctx.fillStyle='rgb(255,0,0)';
   ctx.fillRect(50,50,300,300);
   ctx.fillStyle='rgb(0,255,0)';
   ctx.fillRect(100,100,200,200);
   ctx.fillStyle='rgb(100,100,100)';
   ctx.fillRect(125,175,150,25);  

4. Transparency

   ctx.fillStyle='rgb(0,0,255)';
   ctx.fillRect(30,30,300,300);
   ctx.fillStyle='rgba(0,255,0,0.5)';
   ctx.fillRect(60,60,300,300);
   ctx.fillStyle='rgba(255,0,0,0.25)';
   ctx.fillRect(90,90,300,300);