Заполнение HTML5 canvas нужным цветом: полное решение

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

Для того чтобы заполнить весь холст одним цветом, примените свойство fillStyle для установления цвета и метод fillRect() для его закрепления на всей площади:

let ctx = canvas.getContext('2d');
ctx.fillStyle = 'red'; // Цвет на уровне Ван Гога
ctx.fillRect(0, 0, canvas.width, canvas.height); // Весь холст окрашивается

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

Настройка холста

Приступая к работе, в первую очередь определите размер вашего холста, это делается непосредственно в HTML:

<canvas id="myCanvas" width="500" height="500"></canvas>

После настройки холста, переходим к его окрашиванию в JavaScript:

let canvas = document.getElementById('myCanvas'); 
let ctx = canvas.getContext('2d');
ctx.fillStyle = '#00FFFF'; // Ощущение морского бриза на холсте
ctx.fillRect(0, 0, canvas.width, canvas.height);

Убираем все отвлекающие элементы, чтобы открывать полностью холст:

body, html {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
canvas {
  display: block;
}

Динамичный холст

Холст должен быть готов адаптироваться ко всем ситуациям:

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

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  fillCanvas('#123456'); // Заново заполняем холст
}

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

box-sizing: border-box;

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

Итак, у нас есть холст, представляющий собой пространство для творчества. Начнём:

Пустой холст или "Стена": [        ]

Красить готовы, и наш скрипт уже как кисть в руках мастера:

// Краска
var color = '#FF5733';  // 🎨 Цвет под контролем!

// Кисть
canvasContext.fillStyle = color; // Кисть готова к работе
canvasContext.fillRect(0, 0, canvas.width, canvas.height); // И распространяем её по холсту

В итоге, холст, представленный как "Стена", приобретёт свой цвет:

Холст, изображающий "Стену", становится цветным: [🎨🎨🎨🎨🎨🎨🎨🎨🎨]

Вот так! Теперь перед вами настоящий цветной спектакль. 🖼️

Перекрашивание и слои

Чтобы поменять уже заданный цвет холста, используйте свойство globalCompositeOperation, где вы сможете разгулять истинного Микеланджело:

ctx.globalCompositeOperation = 'destination-over'; // Внесение изменений
ctx.fillStyle = 'green'; // Следующий цвет
ctx.fillRect(0, 0, canvas.width, canvas.height); //

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

Метод через CSS

Вероятно, вы захотите окрасить холст без использования JavaScript. Это возможно:

canvas {
  background-color: #FFD700; // Золотистый оттенок
}

Чтобы динамически изменить цвет, вернёмся к JavaScript:

canvas.style.backgroundColor = 'lightblue'; // Более мягкий цвет для комфорта глаз

Обратите внимание, что стили в JavaScript следуют правилу camelCase!

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

1. CanvasRenderingContext2D: свойство fillStyle – Web API | MDN — подробное руководство по работе с цветами.
2. HTML Canvas — обучающий материал по использованию элемента <canvas>.
3. css – Как мне изменить цвет элемента 'svg'? – Stack Overflow — справка по вопросам и ответам на Stack Overflow.
4. Canvas API – Web API | MDN — всесторонний обзор Canvas API.
5. Пример на CodePen – Заполнение HTML5 Canvas сплошным цветом — практический пример закраски холста.