Canvas reference: The shadowColor property

The shadowColor property can be used to set the color of your shadow

This sets the color of the shadow. The color must be a valid CSS color (ie gradients and patterns are not permitted here but you can use rgba() colors or rgb() colors such as: rgba(255,0,0,0.5) rgb(255,0,0) ).

The example to the right sets the shadowColor to a solid green color.

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.shadowColor = 'green';
        context.shadowOffsetX = 3;
        context.shadowOffsetY = 3;
        context.shadowBlur = 15;
    
        context.fillStyle = 'red';    
        context.fillRect(x, y, width, height);
    }
</script>

See also

• An example of using HTML5 canvas shadows