Question

I have two <canvas> elements in a document.

I want to draw a shape on canvas1, use the ctx1.getImageData() method to copy parts of that shape and animate these parts on canvas2.

I read that using ctx2.putImageData() is slower than using ctx2.drawImage().

How can i create an Image object from a CanvasPixelArray (which is returned from the ctx1.getImageData() call) in JavaScript?

(Note: I don’t want to copy the whole canvas1 but only parts of it. Also, I don’t care about old browsers)

Answer 1

This should do what you want, unless I’m missing something:

ctx2.drawImage(canvas1, source_x, source_y, source_width, source_height, dest_x, dest_y, dest_width, dest_height);

The drawImage() function works with both image and canvas elements, so there is no need to create a new image object or a temporary canvas unless you need to manipulate the pixels.