Изменение размера холста HTML заготовки его содержимого

Question

У меня есть элемент холста HTML, который изменяется при изменении размера экрана.

canvas.height = pageHeight(); 
canvas.width = pageWidth(); 

Фактическое изменение размера прекрасно работает, но оно заполняет холст.

Я хотел был бы сохранить содержание. Есть ли другой способ изменения размера элемента canvas, или есть способ сохранить содержимое, а затем вернуть его на холст?

Answer 1

Необходимо изменить размер холста с помощью CSS или перерисовать холст после его изменения.

Если вы хотите сохранить содержимое холста и перекроить его, я могу думать о нескольких вариантах:

1. Используйте context.getImageData, чтобы захватить весь холст, изменить размер холста, а затем использовать context.putImageData перерисовывать его в новом масштабе.
2. Создайте объект Image, установив источник на результат canvas.toDataUrl(), измените размер холста, а затем нарисуйте изображение в новом масштабе.
3. вызовите context.setScale(xscale, yscale) и вызовите любую функцию, которую вы использовали для рисования холста изначально. Предполагая, что вы правильно настроили xscale и yscale, он автоматически масштабирует все до нового размера.
4. Создайте новый холст с обновленным размером и позвоните context.drawImage(oldCanvas, ...), чтобы скопировать старый холст на новый. Затем вы переключите старый холст на новый.

Первые два варианта не будут работать, если вы нарисовали изображение из другого домена на холст в любое время и не поддерживаются более старыми реализациями.

На мой взгляд, вариант 3 (перерисовка изображения в новом масштабе) является лучшим, если это возможно. Это единственный вариант, который будет поддерживать ваши линии полностью гладкими и резкими, и он всегда будет работать (при условии, что у вас все еще есть вся информация для создания изображения).