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

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -