Как сделать канвас по размеру родителя: решение для JS

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

Чтобы привести размеры холста canvas в соответствие с размерами родительского контейнера, определите в CSS эти размеры как 100%. При этом не забывайте согласовывать CSS-размеры с атрибутами width и height элемента, используя JavaScript. Это обеспечивает высокое качество отрисовки.

<div style="width: 500px; height: 300px;">
  <canvas id="myCanvas" style="width:100%; height:100%;"></canvas>
</div>

const canvas = document.getElementById('myCanvas');

function resizeCanvas() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

CSS управляет внешним видом элемента, а JavaScript задает подходящее разрешение для рабочей области холста.

Адаптация к размерам окна просмотра и устройств

Холст canvas должен правильно отображаться на экранах разных размеров. Рекомендуется использовать единицы vw и vh для создания адаптивного холста, который будет автоматически масштабироваться в соответствии с размерами окна браузера.

canvas {
  width: 100vw;   /* Вмещаем всю ширину окна браузера */
  height: 50vh;   /* И половину его высоты */
}

Для сохранения корректных пропорций на разных устройствах используйте медиа-запросы, чтобы скорректировать размеры холста.

@media only screen and (max-width: 600px) {
  canvas {
    width: 100%;  /* На малых экранах занимаем всю доступную ширину */
    height: auto; /* По высоте у нас гибкий подход */
  }
}

Работа на дисплеях высокого разрешения

Сегодня все чаще встречаются экраны с высокой плотностью пикселей, и чтобы обеспечить четкость рисунков на таких экранах, используйте window.devicePixelRatio для правильного масштабирования.

let scaleFactor = window.devicePixelRatio;

canvas.width = Math.floor(canvas.offsetWidth * scaleFactor);
canvas.height = Math.floor(canvas.offsetHeight * scaleFactor);

let context = canvas.getContext('2d');
context.scale(scaleFactor, scaleFactor); /* Учтено повышенное разрешение */

Таким образом, холст сохраняет четкость и ясность изображения на любом дисплее.

Мастерское управление динамическим изменением размеров

Чтобы избежать проблем с производительностью при динамическом изменении размеров, примените функцию дебаунсинга к событию resize.

window.addEventListener('resize', debounce(resizeCanvas, 250)); /* Отреагируем без спешки */

Функция дебаунсинга гарантирует, что функция изменения размера будет вызвана не чаще, чем один раз в 250 мс.

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

Можно провести аналогию между холстом, идеально заполняющим пространство родителя, и водой, которая идеально заполняет емкость:

Родительский элемент (📦): Определяет границы.
Холст (💧): Идеально заполняет выделенное пространство.

Для идеального совпадения всё просто:

<canvas style="width:100%; height:100%;"></canvas>

Дополнительный CSS:

canvas {
  display: block;     /* Избегаем нежелательных отступов */
  width: 100%;        /* Полностью заполняем ширину контейнера */
  height: 100%;       /* Аналогично по высоте */
}

Вкратце, холст 🖼️ настраивается на размеры родителя 📦, как вода 💧, заполняющая емкость.

Решение распространенных проблем

Управление размерами в CSS

Ключевой момент при определении размеров в CSS – родительский элемент должен иметь заданные размеры. Если это условие не выполнено, процентные размеры холста станут неопределенными.

Подробнее об этом расскажет наш спикер на видео

Исправление распространенного размытия на дисплеях High-DPI

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

Профилактика сдвигов макета страницы

Изменение размеров холста может неожиданно влиять на макет страницы. В качестве решения можно разместить холст в контейнере с overflow: hidden или воспользоваться системами управления макета, такими как Flexbox или Grid.

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

1. Основы использования canvas – Web API | MDN — обзор основ работы с элементом canvas и техника изменения его размеров.
2. Полное руководство по Flexbox | CSS-Tricks — подробная инструкция по созданию автоматически подстраивающихся макетов с помощью Flexbox.
3. javascript – подстроить размеры холста под родительский элемент – Stack Overflow — руководство по изменению размеров canvas относительно родительского контейнера и по работе с адаптивным дизайном.
4. HTML Canvas — обширная информация по работе с холстом в HTML5 и его настройке на полный экран с помощью CSS.
5. Using CSS viewport units: vh, vw, vmin, vmax | SitePoint — изучение единиц измерения вьюпорта для создания адаптивных размеров холста, отображающихся в соответствии с окном браузера.
6. Размер элемента и прокрутка — подробное описание методов автоматической настройки размеров canvas через JavaScript.
7. html – Установка ширины и высоты холста в HTML5 – Stack Overflow — обсуждение методов создания холста, перед которым поставлена задача полностью заполнить контейнер, и методов адаптивного дизайна.