The shadowOffsetX property

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:


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>