Canvas reference: The fillRect() function

The fillRect() function is used for drawing rectangles on your canvas. As the name would suggest it does not stroke them (ie it doesn't draw the outline) - only drawing the filled rectangle. An important thing to remember is that it's not a Path function - so you don't have to call the fill function - when you call the fillRect() function it immediately draws a filled rectangle on your canvas. It uses the fillStyle setting for the color to use.

Arguments to the function

• The X coordinate
• The Y coordinate
• 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');

        var x      = 50;
        var y      = 50;
        var width  = 100;
        var height = 100;
    
        context.fillStyle = 'red';
        context.fillRect(x, y, width, height);
    }
</script>