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

An example

    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);