CODEWITHSUNDEEP
google-chromehtml5-canvas
sam sha
sam sha

Reputation: 852

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 problem

my chrome version is "Chrome for Mac OS X, Version 27.0.1453.116"

enter image description here

<!DOCTYPE html>
<html>
<head>
    <title>Chrome HTML5 Canvas DrawImage Shadow Bug</title>
    <script type="text/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 = "#000000";
        g.shadowBlur = 10;
        g.shadowOffsetX = 0;
        g.shadowOffsetY = 0;
        g.drawImage(image, 20, 20);
        g.fillText("Text shadow in canvas", 10, 20)
    }
    </script>
</head>
<body>
<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>
</body>
</html>

Upvotes: 6

Views: 8659

Answers (1)

Israel Gav
Israel Gav

Reputation: 453

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:

function drawImageWithShadow(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);
}
<img src="http://www.google.com/images/icons/product/chrome-48.png" onload="drawImageWithShadow(this)" />
<br>
<canvas id="mainCanvas" style="border:1px solid black"></canvas>

Upvotes: 6

Related Questions