Scale、Rotate、Translateなどの後にHTML5 Canvasにマウスポインタを描画する方法は？

Question

Scale、Rotate、Translateなどの後にHTML5 Canvasにマウスポインタを描画する方法は？

function drawImage() { 
     clear(); 
     context.save(); 
     context.scale(currentScale, currentScale); 
     context.rotate(currentAngle * Math.PI/180); 
     context.drawImage(image, -image.width/2, -image.height/

     // Here I should expect to draw mouse pointer after scale, rotate or translate.  
} 

Answer 1

逆行列を使用してマウス座標に適用します。

現在の行列を取得するには、ctx.currentTransformを使用できますが、ブラウザのサポートATMが限られているため、サポートを最初に確認する必要があります。

ブラウザとバージョンに応じてSVGMatrixオブジェクトまたはDOMMatrixオブジェクトを返します。後者は新しい（間もなく）標準です。

現在のトランスフォームを使用しているときは、それを逆変換し（ドキュメントを参照）、マウスの座標を逆行列に掛けて、現在のトランスフォームでマウスの座標を取得します。

ブラウザにサポートがない場合は、自分で変換を維持する必要があるため、やや複雑になります。既にstackoverflowでこれを行う方法の例がたくさんあります。もう一度行列を逆にして、マウス座標に適用します。