Установка высоты и ширины в HTML5 Canvas: решения и методы

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

Чтобы задать фиксированные размеры, пропишите атрибуты width и height непосредственно в теге <canvas>:

<canvas id="myCanvas" width="200" height="100"></canvas>

Если вам нужно, чтобы размеры canvas были адаптивными, воспользуйтесь JavaScript для их установки:

let canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Обратите внимание, что использование CSS для управления размерами может исказить графику. CSS отвечает за масштабирование изображения на холсте, никак не влияя на размер самого элемента canvas.

Регулирование размера canvas при помощи JavaScript

Для работы с двухмерным контекстом вашего холста примените метод getContext('2d'). Обратите внимание, что изменение размеров canvas требует его перерисовки, поэтому не забудьте добавить функцию перерисовки:

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // Пожалуйста, не забывайте про перерисовку, чтобы изображение оставалось актуальным.
    redraw(); 
}
window.addEventListener('resize', resizeCanvas);

Ведь никто не хочет видеть искаженные элементы, верно?

Масштабирование с CSS в противовес размерам через JavaScript

CSS не стоит использовать для управления размерами элемента canvas, поскольку он изменяет только визуальное представление холста, не влияя на область рисования. Это может привести к размытию линий и искажению масштаба. Поэтому оставьте CSS в стороне при работе с размерами canvas.

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

Подготовьтесь к творчеству! Давайте взглянем на то, как будет выглядеть ваш HTML <canvas>, если явно указать атрибуты width и height:

🖼️ Рамка холста
📏 Ширина (Ваш горизонт): 🌄----------------🌅  
📐 Высота (Глубина поля):  🏔
                           |
                           | 🌳
                           | 
                           🏞️

Готовы добавить на холст красный цвет?

<canvas width="640" height="480"></canvas> // Отлично, рамка нарисована ✔️. Можно начинать творить!

Подбирая подходящие размеры, вы гарантируете, что ваше творчество не будет искажено.

Обеспечение перерисовки и очистки

Работаете с сложной графикой и анимациями? Запомните о необходимости перерисовывать и очищать холст. Используйте context.clearRect(0, 0, canvas.width, canvas.height) для полной очистки перед каждой новой отрисовкой. Это предотвратит смешение старых и новых изображений на холсте:

function redraw() {
    let ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Это напоминает волшебную доску, не так ли?
}

Экраны с высокой плотностью пикселей

Экраны с высокой плотностью пикселей могут привести к проблемам с изображениями из-за их размытости и низкой четкости. Для решения этой проблемы задайте canvas.width и canvas.height в соответствии с плотностью пикселей вашего устройства:

let scale = window.devicePixelRatio; // Измеряем плотность пикселей, будем применять.
canvas.width = Math.floor(scale * intendedWidth);
canvas.height = Math.floor(scale * intendedHeight);
// Теперь подключаемся CSS. Полотно готово к работе.
canvas.style.width = intendedWidth + "px";
canvas.style.height = intendedHeight + "px";

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

1. <canvas>: графический элемент холста в HTML | MDN
2. Руководство по HTML5 Canvas – W3Schools
3. Новые вопросы по тегу 'canvas' – Stack Overflow на русском
4. Изучаем масштабирование в HTML5 Canvas – Medium
5. Основы работы с HTML5 Canvas – HTMLGoodies