HTML5 Canvas без скроллов: 100% ширины и высоты viewport

Быстрый и эффективный ответ

Для того чтобы Canvas расширился на всю область экрана, установите для него свойство display: block. Это позволит исключить лишние отступы. В CSS укажите ширину и высоту элемента, используя 100vw и 100vh соответственно:

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

Также напишите функцию на JavaScript для автоматической коррекции размеров canvas при изменении размеров окна браузера:

let canvas = document.getElementById('myCanvas');
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // Вставьте сюда вашу личную заставку.
});
resizeCanvas(); // Инициализируем размеры сразу при загрузке.

Не забудьте обнулить отступы и поля у элементов HTML и body. Это позволит canvas полностью реализовать свой потенциал:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  // Безупречно ровная область просмотра без морщин.
}

Адаптивность в реальном времени!

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

• Определите функцию для плавного изменения размеров – resizeCanvas, которая не влияет на содержимое и внешний вид.
• Вызывайте функцию drawStuff после каждого изменения размера.
• Для предотвращения скроллбаров с position: absolute, в body дополнительно указывайте overflow: hidden.

function drawStuff() {
  // Здесь будут реализованы ваши художественные замыслы на canvas.
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  drawStuff(); // Венчаем каждое изменение размера обновлением содержимого.
}

window.addEventListener('resize', resizeCanvas, false);
// Обработчик событий изменения размера должен быть надёжен, вроде фирменного шага солдата.

Решение проблем с нестабильностью браузеров и оптимизация рендеринга

Заменив innerWidth/innerHeight на clientWidth/clientHeight, вы обеспечите стабильность работы канваса. А для эффективного рендеринга используйте requestAnimationFrame:

function render() {
  requestAnimationFrame(render);
  // Приготовление содержимого canvas к рендерингу.
}

// Запускаем цикл рендеринга.
render();

Обработка событий загрузки и изменения размера должна быть безупречна:

function setupCanvas() {
  resizeCanvas();
  render();
  // Готовность номер один. Начинаем.
}

window.onload = setupCanvas;
window.onresize = resizeCanvas;
// Терминаторский подход к onload и onresize: "Я вернусь".

Также обдумайте вопрос масштабирования ваших игр и творческих проектов в зависимости от размеров окна.

Обнаружение и удаление антипаттернов

С каждым изменением размера держите свой код в чистоте и порядке, избегая антипаттернов:

• Производите рефакторинг кода: организуйте логику максимально понятно и структурированно.
• Гарантируйте высокую производительность: перерисовывайте только при изменениях. Для этого потребуется функция обратного вызова.
• Проводите кросс-тестирование: проверьте работу своего решения на различных платформах, например, на jsfiddle. Будьте внимательны.

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

Представьте себе, как HTML5 Canvas идеально вписывается в область просмотра:

Ваш Вьюпорт (🖼️):
+-----------------------------+
|                             |
|        HTML5 Canvas         |
|          (🎨)               |
|           ПОЛНЫЙ             |
|          ОБЪЕМ             |
|          ЭКРАНА            | 
|                             |
+-----------------------------+

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

Эффективные стратегии и специальные ситуации

Полное сохранение содержимого при изменении размеров

Пустой canvas при изменении размера экрана – это уже в прошлом! Защищайте ваши произведения:

const offScreenCanvas = document.createElement('canvas');
// Вашему содержимому при изменении размера нужно прятаться.

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

Портретный или ландшафтный режим?

Работайте со строгими пропорциями? Сохраняйте соотношение сторон в рамках установленных параметров:

function resizeCanvas() {
  // Меняем размеры, сохраняя пропорции
  drawStuff(); // Приветствие от Пикассо. Обновляем пропорции содержимого.
}

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

Обратите внимание на сенсорные события для мобильных приложений. Кроме того, будьте готовы к виртуальным клавиатурам.

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

1. <canvas>: Элемент графического холста – HTML: HyperText Markup Language | MDN — углубите свои знания о элементе HTML5 canvas.
2. HTML Canvas – W3Schools — омолите свои навыки работы с элементом canvas, используя практические уроки.
3. Размышления о стилизации модального окна | CSS-Tricks — узнавайте лучшие практики стилизации модальных окон, что актуально и для работы с canvas.
4. Responsive Web Design, A Book Apart — подучите технику адаптивного веб-дизайна от Итана Маркотта, умение которой будет незаменимым при работе с canvas и адаптацией под разные устройства.
5. Медиа-запросы Уровень 3 — полезные рекомендации из спецификации W3C по адаптивному дизайну.