Canvas reference: The strokeStyle property

The strokeStyle property is used to set the color used for stroking - by both the strokeRect() and stroke() functions

The strokeStyle option is a property, usually a string, which is used to set the color used to do stroking on the canvas. For example the strokeRect() and stroke() functions both use this setting to determine the color that they use.

As well as a string it can be a linear/radial gradient or a pattern. You can find out more about these at the links below.

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>

See also:

• Patterns
• Linear gradients
• Radial gradients
• About canvas color definitions