StackOverflow_17469260: How to draw image shadow with HTML5 canvas in Chrome browser

by Gustavo Carvalho

HTML

<img src="http://www.google.com/images/icons/product/chrome-48.png" onload="drawImage(event)" style="-webkit-filter: drop-shadow(0px 0px 10px #222);" />
<div>
    <canvas id='canvas' style="background-color: #DDDDDD" />
</div>

JavaScript

function drawImage(evt){
        var image = evt.target;
        var w = image.width;
        var h = image.height;

        var canvas = document.getElementById('canvas');
        var g = canvas.getContext('2d');
        
        g.shadowColor = "rgba(0,0,0,1)";
        g.shadowBlur = 10;
        g.shadowOffsetX = 0;
        g.shadowOffsetY = 0;
        g.drawImage(image, 20, 20);
        g.fillText("Text shadow in canvas", 10, 20);
    }