The shadowOffsetX property

• An example

This sets the x-axis offset of the shadow. Values can be positive (the shadows are cast to the right) or negative (the shadows are cast to the left). Inner shadows are not supported but are achievable by:

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