29.01.2025

Copiando Conteúdo de um Canvas para Outro em JS

Resposta Rápida

Para transferir conteúdo de um canvas para outro, você precisará do método drawImage. Chame os contextos de ambos os canvases e realize a cópia passando o canvas fonte para o método:

let srcCtx = sourceCanvas.getContext('2d');
let destCtx = destinationCanvas.getContext('2d');

destCtx.drawImage(sourceCanvas, 0, 0); // Copiando conteúdo em uma única linha 😄

Este método permite que você copie todas as imagens do sourceCanvas para o destinationCanvas, posicionando-as no canto superior esquerdo do canvas. Certifique-se de que o canvas fonte já tenha sido desenhado!

Um Olhar Mais Aprofundado sobre drawImage

O método drawImage pode usar HTMLCanvasElement como fonte de uma imagem, eliminando a necessidade de operações intermediárias, o que melhora a eficiência.

Além disso, drawImage funciona com sucesso não apenas com canvases, mas também com HTMLImageElement e HTMLVideoElement.

A Importância da Velocidade

Trabalhar com um canvas é semelhante a participar de uma corrida de cem metros. Aqui, drawImage supera objetos ImageData, demonstrando maior desempenho. Este método é a solução pronta quando há restrições de memória.

Visualização

Imagine os canvases como dois projetores em uma sala de cinema.

Projetor 1 (🎥): Exibindo um filme 🎬🌟
Projetor 2 (🎥): Aguardando ⏳

Copiamos o filme para o segundo projetor:

🎥🎬🌟 ➡️ 🔄 ➡️ 🎥🎬🌟
# Narrador: E ambos os projetores ganham o prêmio de Melhor Filme!

Agora, ambos os projetores exibem o mesmo filme:

Projetor 1 (🎥): 🎬🌟 Sessão gratuita? 🎬🌟 Projetor 2 (🎥)

Isso ilustra o processo de cópia do conteúdo do canvas.

Copiando Conteúdo do Canvas Usando toDataURL e Image

Se você precisar mover o conteúdo do canvas entre diferentes contextos (por exemplo, de um worker da web para a thread principal), use o método toDataURL.

Exemplo de código:

let dataURL = sourceCanvas.toDataURL();
let image = new Image();
image.onload = function() {
    destinationCanvas.getContext('2d').drawImage(image, 0, 0); // Caixa de correio do canvas 📨
};
image.src = dataURL;

Não comece a desenhar até que a imagem tenha sido totalmente carregada. toDataURL criará uma imagem no formato "image/png", enquanto mantém a transparência.

Tentando Métodos Alternativos

drawImage e toDataURL são dois métodos clássicos para clonar um canvas. Se você precisar redimensionar ou transformar a cópia, drawImage oferece essa oportunidade:

destCtx.drawImage(sourceCanvas, 0, 0, width, height); // Redimensionando sem perder conteúdo 🎳

Experimente tamanhos e proporções para uma exibição melhor.

Consulte Recursos e Benchmarks

Vale a pena notar que jsPerf é o ápice em testes de velocidade: jsperf.com/copying-a-canvas-element. A função context.canvas também é extremamente útil para obter um canvas do contexto.

Materiais Úteis

1. <canvas>: Elemento Canvas Gráfico - HTML: Linguagem de Marcação Hipertexto | MDN — Uma visão geral detalhada do elemento Canvas na MDN Web Docs.
2. HTML Canvas - W3Schools — Noções básicas de como trabalhar com Canvas no W3Schools.
3. html - Como copiar conteúdos de um canvas para outro localmente - Stack Overflow — Sabedoria coletiva do Stack Overflow.
4. CanvasRenderingContext2D: método getImageData() - Web API | MDN — Uma introdução ao método de trabalho com ImageData na MDN.
5. CanvasRenderingContext2D: método drawImage() - Web API | MDN — Análise do método para renderizar imagens em um canvas.
6. web.dev — Explorando outros aspectos do mundo virtual, incluindo canvases e tecnologias relacionadas.

Video

Navigation