Canvas reference: The strokeRect() function

The strokeRect() function is used for drawing rectangles on your canvas. As the name would suggest it does not fill them - only drawing the outline. An important thing to remember is that this is not a Path function - so you don't have to call the stroke() function - when you call the strokeRect() function it immediately draws a rectangle on your canvas. It uses the strokeStyle 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.strokeStyle = 'red';
        context.strokeRect(x, y, width, height);
    }
</script>