The shadowOffsetY property

• An example

This sets the y-axisoffset of the shadow. Values can be positive (the shadows are cast down) or negative (the shadows are cast up). Inner shadows are not supported but are achievable if you:

• 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

You can find details of inner shadows 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.shadowColor = '#ccc';
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 30;
        context.shadowBlur = 15;
    
        context.fillStyle = 'red';    
        context.fillRect(x, y, width, height);
    }
</script>