Canvas reference: The rect() function

The rect() function is a path function used when drawing paths to draw rectangles

The rect() function is used whilst drawing paths to the canvas to draw a rectangle to the canvas. Nothing is actually drawn to the canvas until you call the stroke() or fill() functions.

Arguments to the function

• The X coordinate (of the center point)
• The Y coordinate (of the center point)
• The width of the rectangle
• The height of the rectangle

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        context.beginPath();
        context.rect(50, 50, 100, 100);
        context.stroke();
    }
</script>