Копирование содержимого одного canvas в другой на JS

Быстрый ответ

Для переноса содержимого с одного холста на другой вам потребуется метод drawImage. Вызовите контексты обоих холстов и проведите копирование, передав в метод исходный холст:

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

destCtx.drawImage(sourceCanvas, 0, 0); // копирование содержимого в одну строку 😄

Такой способ позволяет скопировать все изображения с sourceCanvas на destinationCanvas, располагая их в левом верхнем углу холста. Обязательно проверьте, что исходный холст уже прорисован!

Глубже в drawImage

Метод drawImage способен использовать HTMLCanvasElement в качестве источника изображения, что исключает необходимость промежуточных операций, улучшая при этом эффективность.

Добавлю, что drawImage успешно работает не только с холстами, но и с HTMLImageElement и HTMLVideoElement.

Значимость скорости

Работа с холстом схожа с участием в стометровке. Здесь drawImage выигрывает у объектов ImageData, демонстрируя более высокую производительность. Этот метод — ваше готовое решение при ограничениях памяти.

Визуализация

Представьте холсты как два проектора в кинотеатре.

Проектор 1 (🎥): Воспроизводит фильм 🎬🌟
Проектор 2 (🎥): Находится в ожидании ⏳

Копируем фильм на второй проектор:

🎥🎬🌟 ➡️ 🔄 ➡️ 🎥🎬🌟
# Комментатор: И оба проектора удостаиваются приза за лучший фильм!

Теперь оба проектора показывают один и тот же фильм:

Проектор 1 (🎥): 🎬🌟 Бесплатный киносеанс? 🎬🌟 Проектор 2 (🎥)

Это и ilлюстрирует процесс копирования содержимого холста.

Копирование содержимого холста с помощью toDataURL и Image

Если необходимо передать содержимое холста между разными контекстами (например, из веб-воркера в основной поток), используйте метод toDataURL.

Пример кода:

let dataURL = sourceCanvas.toDataURL();
let image = new Image();
image.onload = function() {
    destinationCanvas.getContext('2d').drawImage(image, 0, 0); // Почтовый ящик холста 📨
};
image.src = dataURL;

Не приступайте к рисованию, пока не завершится загрузка изображения. toDataURL создаст изображение в формате "image/png", сохраняя при этом прозрачность.

Попробуем альтернативные методы

drawImage и toDataURL — два классических метода для клонирования холста. Если вам нужно изменить размер или трансформировать копию, drawImage предоставит эту возможность:

destCtx.drawImage(sourceCanvas, 0, 0, width, height); // Меняем размер без потери контента 🎳

Экспериментируйте с размерами и пропорциями для лучшего отображения.

Обратитесь к ресурсам и бенчмаркам

Стоит обратить внимание, что jsPerf является вершиной в сфере тестирования скорости: jsperf.com/copying-a-canvas-element. Также крайне полезной может быть функция context.canvas для получения холста из контекста.

Полезные материалы

1. <canvas>: Элемент холста графики – HTML: Язык разметки гипертекста | MDN — подробный обзор элемента Canvas от MDN Web Docs.
2. HTML Canvas – W3Schools — основы работы с Canvas на W3Schools.
3. html – Как скопировать содержимое одного холста на другой локально – Stack Overflow — мудрость коллективного разума Stack Overflow.
4. CanvasRenderingContext2D: метод getImageData() – Веб API | MDN — знакомство с методом работы с ImageData на MDN.
5. CanvasRenderingContext2D: метод drawImage() – Веб API | MDN — разбор метода отрисовки изображений на холсте.
6. web.dev — изучение других аспектов виртуального мира, включая холсты и связанные с ними технологии.