Canvas reference: The strokeRect() function

The strokeRect() function can be used to draw rectangular outlines on to your canvas

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>