html - HTML5 スケーリング変換で間違った位置が生成される

Question

winjs のジェスチャ コントロールからマトリックス値を介して取得した値に基づいて、キャンバス上の画像を変換するのに役立つ次のコードがあります。

試行 1:

最初は canvas.setTransform(a,b,c,d,e,f); を使ってみました。

        for (var i = 0; i < elt.length; i++) {
            elt[i] = document.getElementById("Img" + i);
            can.appendChild(elt[i]);

        }
       for (var i = 0; i < elt.length; i++) {
         var m = new MSCSSMatrix(elt[i].style.transform);
            ctx.save();             
            ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
            ctx.drawImage(can.children[i], parseInt(elt[i].style.left), parseInt(elt[i].style.top), 180, 500);
            ctx.restore();
      }

試行 2:

多くのチュートリアルによると、変換中にスケーリング-回転-変換の順序に従うことが提案されていたので、これを試しました

      for (var i = 0; i < elt.length; i++) {
            elt[i] = document.getElementById("Img" + i);
            can.appendChild(elt[i]);

        }
    for (var i = 0; i < elt.length; i++) {
         var m = new MSCSSMatrix(elt[i].style.transform);
             ctx.save();             
             ctx.scale(Math.sqrt((m.a * m.a) + (m.c * m.c)), Math.sqrt((m.b * m.b) + (m.d * m.d)));
             ctx.rotate(Math.atan(-(m.m21) / m.m22));
             ctx.translate(m.e, m.f);
             ctx.drawImage(can.children[i], parseInt(elt[i].style.left), parseInt(elt[i].style.top), 180, 500);
             ctx.restore();
      }

どちらの場合も、変換された画像のみが変換され、キャンバス上に適切に配置されます。しかし、画像がスケーリングされて変換されると、変換された画像は正しい位置に表示されません。そのため、画像がスケーリングされたときにのみ画像の座標が変化するようです。どうすればこれを修正できますか!?