Question

We saw this SO post on cloning HTML5 canvas elements: Any way to clone HTML5 canvas element with its content?

We tried doing a deep clone with jQuery (i.e., $(canvas).clone(true) ), but the image data didn’t seem to copy over.

Is this not possible with jQuery?

Answer 1

If you don’t need to copy any attached event handlers (which, in general, I doubt is possible), I’d just use the currently accepted solution to Display canvas image from one canvas to another canvas using base64

//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');

//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);

Of course, you’d have to create the destination canvas first, so, before that, you’d have to:

var destinationCanvas    = document.createElement('canvas');
destinationCanvas.width  = sourceCanvas.width;
destinationCanvas.height = sourceCanvas.height;