回転後にHTML Canvas ShadowBlurが動作しない

Question

私が抱えている問題は、キャンバスを描画するためにキャンバスをまっすぐ回転させると、イメージを描画するときにCanvasがシャドウブルー効果を描画しないということです。回転値を0度に設定しても問題なく動作します。

私は一緒にjsfiddle本当の高速を投げ、画像がピクセル化して歪んですが、とにかく、それは問題https://jsfiddle.net/zsw7wkv4/1/

編集を再現：クロームしているように見えるだけでここ

を発行すると、コード

var canvas = document.getElementById('GameCanvas'); 
var ctx = canvas.getContext("2d"); 

var asset = card.asset; 

// set the card height based off the width 
var height = width * 2.66; 

// save the canvas before rotating 
ctx.save(); 

// hover effect for 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 to the center of the card 
ctx.translate(core.information.pwidth * (left + width/2), core.information.pheight * (top + height/2)); 

// rotate the canvas for the card 
ctx.rotate(rotation * Math.PI/180); 

// translate back 
ctx.translate(-core.information.pwidth * (left + width/2), -core.information.pheight * (top + height/2)); 

// draw the card 
ctx.drawImage(asset, core.information.pwidth * left, core.information.pheight * top, core.information.pwidth * width, core.information.pheight * height); 

// restore the canvas after rotating  
ctx.restore(); 

です

Answer 1

同じ問題があります。

最初にテクスチャキャンバスにbluredイメージを描画し、最後のキャンバスにイメージ（回転）として描画します。