複数のimageData構造体を1つのキャンバスにまとめる

Question

canvasで動作するフレームワークはKonvajsです。私は3つの図形（スロット）を作成し、いくつかの操作を行う必要があります。それは動作するだけでなく、私はピクセルで作業する必要があります、私は画像をgetImageData経由で取得し、内部構造に格納し、操作のために使用します。

var c = this.layer.getCanvas(); 
var ctx = c.getContext(); 
this.slots[name].data = ctx.getImageData(0, 0, this.stage.getWidth(), this.stage.getHeight()); 

ジョブが実行されたときに、私はそれらのimageData構造を1つに結合したいと思いますが、できません。このanswerを使用して、私はそれをしようが、常に取得：

konva.min.js:29 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

これはコードの私の抜粋です：

var c = layer.getCanvas(); 
var ctx = c.getContext(); 

for (var slot_name in this.slots) { 
    console.log('Slot', slot_name); 
    var slot_data = this.slots[slot_name].data; 
    var c2 = layer.getCanvas(); 
    var ctx2 = c2.getContext(); 
    ctx2.putImageData(slot_data, 0, 0); 
    ctx.drawImage(c2, 0, 0); 
} 
var imageData3 = c.toDataURL({pixelRatio: 1}); 
zip.file('scene.png', imageData3.substr(imageData3.indexOf(',') + 1), {base64: true}); 

どこに間違いはありますか？

UPDATE：

変更行：

ctx.drawImage(c2, 0, 0); 

へ：

ctx.drawImage(c2._canvas, 0, 0); 

とキャンバス節約できますが、私は最後に保存した画像を参照してください。どうして？

Answer 1

var c2 = layer.getCanvas(); - ここのキャンバスはネイティブキャンバスではなく、コンバラッパーです。だから、なぜそれを描こうとしているのか誤りです。

ネイティブキャンバスへの参照を取得するには、var c2 = layer.getCanvas()._canvas;を使用します。