The fillStyle property

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

[No canvas support]
An example of using the fillStyle setting to draw a red rectangle

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