1

I'm using Konvajs framework to work with canvas. I need to create three shapes (slots) and make some manipulations. It works but also I need to work with pixels, I get image via getImageData, store it in internal structure then use for manipulation.

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

when the job is done, I want to combine those imageData structures into one but I can't. Using this answer I try to do it, but always get:

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)'

This is my snippet of code:

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});

Where is my mistake?

UPDATE:

changed line:

ctx.drawImage(c2, 0, 0);

to:

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

and canvas saves but I see only the last saved picture. Why?

1 Answer 1

0

var c2 = layer.getCanvas(); - canvas here is not native canvas, it is Konva wrapper. So you have an error why you are trying to draw it.

To get reference to native canvas you can use: var c2 = layer.getCanvas()._canvas;.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.