キャンバス内にHTMLキャンバスをレンダリングする

Question

複雑な状況を解決する必要があります。私はすでにCanvas elementに何らかのテキスト行などを描画しています。どのようにレンダリングされたのかわかりません。しかし、今、私はその手段の転換回転、スケールを設定する必要があり、それ等の

var canvas = document.getElementById("item1-canvas"); 
var ctx = canvas.getContext("2d"); 

var angle1 = 0.1; 
var angle2 = 0.14; 
var cs = Math.cos(angle1), sn = Math.sin(angle1); 
var h = Math.cos(angle2); 

var a = 100*cs, b = -100*sn, c = 200; 
var d = h*100*sn, e = h*100*cs, f = 200; 

ctx.setTransform(a, d, b, e, c, f); 

私はキャンバスがクリアされ、必要なすべてのものが再描画されるように変換または設定しますが、私はの正確なメカニズムを知っていないと最初の描画。これを解決するために、別のキャンバス内にキャンバスをレンダリングすることになったため、初期キャンバスをレンダリングする必要はありません。そして、2番目のキャンバスの変換を設定することができます。

どうすればいいですか？

Answer 1

変換を導入するためだけに（ビットマップ）キャンバスを別のものにレンダリングすると（drawImage()を使用）、結果が悪くなります。これは、キャンバスの結果がベクトルではなくピクセルであるためです。

描画コマンドを最初のキャンバスコンテキストにトラップして記録し、後で変換されたコンテキストで再生できるようにする必要があります。