html5-canvas Shadows Shadowing is computationally expensive -- Cache that shadow!
Example
Warning! Apply shadows sparingly!
Applying shadowing is expensive and is multiplicatively expensive if you apply shadowing inside an animation loop.
Instead, cache a shadowed version of your image (or other drawing):
-
At the start of your app, create a shadowed version of your image in a second in-memory-only Canvas:
var memoryCanvas = document.createElement('canvas') ... -
Whenever you need the shadowed version, draw that pre-shadowed image from the in-memory canvas to the visible canvas:
context.drawImage(memoryCanvas,x,y)
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
canvas.style.border='1px solid red;';
document.body.appendChild(canvas);
// Always(!) use "img.onload" to give your image time to
// fully load before you try drawing it to the Canvas!
var img=new Image();
img.onload=start;
// Put your own img.src here
img.src="http://i.stack.imgur.com/hYFNe.png";
function start(){
ctx.drawImage(img,0,20);
var cached=cacheShadowedImage(img,'black',5,3,3);
for(var i=0;i<5;i++){
ctx.drawImage(cached,i*(img.width+10),80);
}
}
function cacheShadowedImage(img,shadowcolor,blur){
var c=document.createElement('canvas');
var cctx=c.getContext('2d');
c.width=img.width+blur*2+2;
c.height=img.height+blur*2+2;
cctx.shadowColor=shadowcolor;
cctx.shadowBlur=blur;
cctx.drawImage(img,blur+1,blur+1);
return(c);
}
