How To Draw Image Shadow With Html5 Canvas In Chrome Browser

We can draw shadow by g.shadowBlur method in HTML5 , it is OK in most of browsers, except Chrome, when I draw a transparent image shadow, it looks as follows, how can I solve this

Solution 1:

A solution to drawing the img to work on Chrom was mentioned in a comment to the question by @Gustavo Carvalho. I thought it should be used here as an answer, not a comment, which is to draw the image in a temporary canvas, then draw the temp canvas with a shadow. this way you will get the bitmap img shadowed:

functiondrawImageWithShadow(img) {
  var ctx = document.getElementById('mainCanvas').getContext('2d');
  var tmpCanvas = document.createElement('canvas');
  var tmpCtx = tmpCanvas.getContext('2d');


  tmpCtx.drawImage(img, 0, 0);


  ctx.shadowOffsetX = 10;
  ctx.shadowOffsetY = 10;
  ctx.shadowColor = 'black';
  ctx.shadowBlur = 30;
  ctx.drawImage(tmpCanvas,0,0);
}

<imgsrc="http://www.google.com/images/icons/product/chrome-48.png"onload="drawImageWithShadow(this)" /><br><canvasid="mainCanvas"style="border:1px solid black"></canvas>