Canvas reference: The fillRect() function

Summary: The fillRect() function can be used to draw filled rectangles on to your canvas. Different to the path fill function this draws the rectangle immediately onto the canvas with no waiting (unlike the rect() path function). If you just want a quick rectangle - this may be the function for you.

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>