Объединить несколько структур изображения в одном холсте

Question

Я использую Konvajs рамки для работы с canvas. Мне нужно создать три формы (слоты) и сделать некоторые манипуляции. Он работает, но также мне нужно работать с пикселями, я получаю изображение через 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 структуры в один, но я не могу. С помощью этого 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(); - холст здесь не является родным холстом, это оболочка Konva. Таким образом, у вас есть ошибка, почему вы пытаетесь ее нарисовать.

Чтобы получить ссылку на родной холст, вы можете использовать: var c2 = layer.getCanvas()._canvas;.