Any way to clone HTML5 canvas element with its content?

Question

Is there any way to create a DEEP copy of CANVAS element with all drawn content?

Answer 1

You can call

context.getImageData(0, 0, context.canvas.width, context.canvas.width);

which will return an ImageData object. This has a property named data of type CanvasPixelArray which contains the rgb and transparency values of all the pixels. These values are not references to the canvas so can be changed without affecting the canvas.

If you also want a copy of the element, you could create a new canvas element and then copy all attributes to the new canvas element. After that you can use the

context.putImageData(imageData, 0, 0);

method to draw the ImageData object onto the new canvas element.

See this answer for more detail http://stackoverflow.com/questions/667045/getpixel-from-html-canvas on manipulating the pixels.

You might find this mozilla article useful as well https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas