The fillRect function

[No canvas support]
An example of 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);

RGraph on social media