Canvas reference: The fillStyle property

The fillStyle property is used to set the color used for filling - by both the fillRect() and fill() functions

The fillStyle option is a property, usually a string that is used to set the color used to do filling on the canvas. For example the fillRect() and fill() functions both use this setting to determine the color that they use.

As well as a string it can be a canvas linear or radial gradient. More about these at the link 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.fillStyle = 'red';
        context.fillRect(x, y, width, height);
</script>

See also:

• Linear gradients
• Radial gradients
• About canvas color definitions