CanvasRenderingContext2D: свойство shadowColor

Свойство CanvasRenderingContext2D.shadowColor API Canvas 2D задаёт цвет тени.

Обратите внимание, что непрозрачность отрисованной тени будет зависеть от непрозрачности цвета fillStyle при заливке и цвета strokeStyle при обводке.

Строка, интерпретируемая как значение CSS <color>. Значение по умолчанию — полностью прозрачный чёрный.

В этом примере добавляется тень к двум квадратам; первый — залитый, второй — обведённый. Свойство shadowColor задаёт цвет тени, а shadowOffsetX и shadowOffsetY — её позицию относительно фигур.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// Filled rectangle
ctx.fillRect(20, 20, 100, 100);

// Stroked rectangle
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);

Результат

Непрозрачность тени зависит от уровня прозрачности родительского объекта (даже если shadowColor задаёт полностью непрозрачное значение). В этом примере прямоугольник обводится и заливается полупрозрачными цветами.

HTML

<canvas id="canvas"></canvas>

JavaScript

Полученное альфа-значение тени заливки равно .8 * .2, или .16. Альфа-значение тени обводки равно .8 * .6, или .48.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Shadow
ctx.shadowColor = "rgb(255 0 0 / 80%)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;

// Filled rectangle
ctx.fillStyle = "rgb(0 255 0 / 20%)";
ctx.fillRect(10, 10, 150, 100);

// Stroked rectangle
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(0 0 255 / 60%)";
ctx.strokeRect(10, 10, 150, 100);

Результат

В браузерах на основе WebKit и Blink помимо этого свойства реализован нестандартный и устаревший метод ctx.setShadow().

setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D