HTML5翻訳方法、デフォルトにリセットする方法

Question

HTML5のtranslate-methodは、図面の原点を元の原点に相対的に移動させるため、 （私がctx.translate（20,20）を2回連続して使用すると、ctx.translate（40,40）を使用したときと同じ結果になります） これで問題は描画の起点をリセットしたいのです元の位置（最初にtranslate（）を使用する前の位置）に戻すには、どうしたらいいですか？

Answer 1

ctx.setTransform(1, 0, 0, 1, 0, 0); 

MDN setTransform documentation

Answer 2

あなたは.save()と.restore()

ctx.save(); 
ctx.translate(// do some translations); 
// draw whatever 
ctx.restore(); 

を使用しますが、現在のコンテキストの状態を「保存」するsave()を呼び出す必要があることを行うことができます。その後、翻訳、回転などを実行することができます。restore()の呼び出しが完了した後、最初にsave()と呼んだときのコンテキストの状態にリセットされます。

Live Demo

MDN Tutorial also explaining it

Answer 3

ctx.resetTransform(); 

詳細はMDN documentationを参照してください。ブラウザの互換性は非常に低いです。