Rectangle

Draw a Rectangle, Rectangle is a four-sided polygon with all internal angles equal to 90 degrees. You can change the anchor, stroke, fill etc.

Syntax

                    
  new rect(x, y, width, height, fill, fill_opacity, stroke, stroke_width, anchor, border_radius);
                

Parameters

x Number : x-coordinate of the reference point
y Number : y-coordinate of the reference point
width Number : width of the rectangle
height Number : height of the rectangle
fill Color : fill color of the rectangle
fill_opacity Number [0 to 1] or percentage: fill opacity of the rectangle
stroke Color : stroke color of the rectangle
stroke_width Number : stroke width of the rectangle
anchor 'top-left', 'top-right', 'center', 'bottom-left', 'bottom-right' : anchor of the rectangle
border_radius Number or percentage : Border Radius of the rectangle.

Example

                    
    new point(WIDTH/2, HEIGHT/2, "#695fe6", 5);
    new rect(WIDTH/2,HEIGHT/2,100,100, "#E089B1", 0.1, "#E089B1", 1, "center",2);
    new rect(WIDTH/2,HEIGHT/2,100,100, "#695FE6", 0.1, "#695FE6", 1, "top-left",2);
    new rect(WIDTH/2,HEIGHT/2,100,100, "#695FE6", 0.1, "#695FE6", 1, "bottom-left",2);
    new rect(WIDTH/2,HEIGHT/2,100,100, "#695FE6", 0.1, "#695FE6", 1, "bottom-right",2);
    new rect(WIDTH/2,HEIGHT/2,100,100, "#695FE6", 0.1, "#695FE6", 1, "top-right",2);
                   
        
    t=0;
    function draw(){
        clearCanvas();
        new rect(WIDTH/2,HEIGHT/2,150,150, "#695FE6", 0.1, "#695FE6", 1, "center",150*sin(t)/2);
        t+=0.1;
        requestAnimationFrame(draw);
    }