Possible to deep clone HTML5 canvas element with jQuery?

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?

Probably a daft question but you are inserting the clone back into the DOM, aren't you? — Beetroot-Beetroot, Oct 24 '12 at 02:08
Possible solution: http://forum.jquery.com/topic/content-retention-when-cloning-html5-canvas — Matthew Blancarte, Oct 24 '12 at 02:33

score 6 · Accepted Answer · edited May 23 '17 at 11:55

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;

This is what we wound up doing. – Crashalot Oct 24 '12 at 07:26 — Crashalot, Oct 24 '12 at 07:26

Possible to deep clone HTML5 canvas element with jQuery?

1 Answers1