Смена цвета линии в canvas на JavaScript

Давайте теперь научимся менять цвет контура и заливки. Для этого есть следующие свойства: свойство strokeStyle устанавливает цвет контура, а свойство fillStyle - цвет заливки. Цвета устанавливаются в обычном CSS формате.

Пример

Давайте нарисуем контур с помощью rect и покрасим его в красный цвет:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

Пример

Давайте нарисуем квадратик с помощью rect и покрасим его в зеленый цвет:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

Замечание

Важно: когда вы устанавливаете strokeStyle или fillStyle, новое значение применится для всех фигур, которые будут нарисованы с этого момента. Для каждой фигуры, для которой вам нужен другой цвет, вы должны перезаписать значение fillStyle или strokeStyle.

Практические задачи