javascript - HTML Canvas ShadowBlur Not Working After Rotating -
the problem having canvas not draw shadowblur effect when drawing image if rotate canvas @ draw it. works fine if set rotation value 0 degrees.
i threw jsfiddle real fast, image pixelated , distorted anyhow reproduces issue https://jsfiddle.net/zsw7wkv4/1/
edit: seems chrome issue
here code
var canvas = document.getelementbyid('gamecanvas'); var ctx = canvas.getcontext("2d"); var asset = card.asset; // set card height based off width var height = width * 2.66; // save canvas before rotating ctx.save(); // hover effect drawn card if (core.information.xoffset >= left && core.information.xoffset <= left + width && core.information.yoffset >= top && core.information.yoffset <= top + height) { ctx.shadowcolor = 'white'; ctx.shadowblur = 15; } // translate center of card ctx.translate(core.information.pwidth * (left + width/2), core.information.pheight * (top + height/2)); // rotate canvas card ctx.rotate(rotation * math.pi/180); // translate ctx.translate(-core.information.pwidth * (left + width/2), -core.information.pheight * (top + height/2)); // draw card ctx.drawimage(asset, core.information.pwidth * left, core.information.pheight * top, core.information.pwidth * width, core.information.pheight * height); // restore canvas after rotating ctx.restore();
have same issue.
draw blured image temp canvas first, draw image (rotated) on "final" canvas.
Comments
Post a Comment