Изменение размера 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 (перерисовка изображения в новом масштабе) является наилучшим, если это возможно. Это единственный вариант, который сделает ваши линии абсолютно гладкими и четкими, и он всегда будет работать (при условии, что у вас все еще есть вся информация для создания изображения).