Canvas reference: The shadowBlur property

The shadowBlur property is used to set the severity of the blurring effect of the shadow

This sets the amount of blurring that the shadow has. In conjunction with the clip() function and setting the offset X/Y values to zero you can achieve inner shadows:

• Draw a shape
• Clip the canvas to that shape
• Draw an outline of that shape just outside the clipped area with shadow enabled
• Set the shadow X/Y offsets to 0
• Half the shadow will fall inside the clipped area and will thus be drawn on your canvas

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

See also

• An example of using HTML5 canvas shadows