The fillStyle property

• An example
• See also

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 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.fillStyle = 'red';
        context.fillRect(x, y, width, height);
</script>

See also

• Linear gradients
• Radial gradients
• About canvas color definitions