Qualquer maneira de clonar o elemento de canvas HTML5 com seu conteúdo?

Existe alguma maneira de criar uma cópia em profundidade de um elemento de canvas com todo o conteúdo desenhado?

Na verdade, a maneira correta de copiar os dados da canvas é passar a canvas antiga para a nova canvas em branco. Tente esta function.

function cloneCanvas(oldCanvas) { //create a new canvas var newCanvas = document.createElement('canvas'); var context = newCanvas.getContext('2d'); //set dimensions newCanvas.width = oldCanvas.width; newCanvas.height = oldCanvas.height; //apply the old canvas to the new one context.drawImage(oldCanvas, 0, 0); //return the new canvas return newCanvas; } 

Usar getImageData é para access a dados de pixel, não para copiar canvass. Copiar com ele é muito lento e difícil no navegador. Deve ser evitado.

Você pode ligar

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

que retornará um object ImageData. Isto tem uma propriedade chamada data do tipo CanvasPixelArray que contém os valores rgb e transparência de todos os pixels. Esses valores não são referências à canvas, portanto, podem ser alterados sem afetar a canvas.

Se você também quiser uma cópia do elemento, poderá criar um novo elemento de canvas e, em seguida, copiar todos os atributos para o novo elemento de canvas. Depois disso, você pode usar o

 context.putImageData(imageData, 0, 0); 

método para desenhar o object ImageData no novo elemento de canvas.

Veja esta resposta para mais detalhes getPixel de HTML Canvas? na manipulação dos pixels.

Você pode achar útil este artigo do mozilla https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes