Как нарисовать текст с эффектом тени на Canvas?

@elda 

Для создания текста с эффектом тени на Canvas можно использовать методы fillText() или strokeText() в сочетании с методом shadowColor() для установки цвета тени и shadowBlur() для установки интенсивности размытия тени.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// Получаем контекст Canvas
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Устанавливаем цвет и интенсивность тени
ctx.shadowColor = 'black';
ctx.shadowBlur = 10;

// Отрисовываем текст с тенью
ctx.fillStyle = 'red';
ctx.font = 'bold 36px Arial';
ctx.fillText('Текст с тенью', 50, 50);

В данном примере мы установили цвет тени как черный и интенсивность размытия в 10 пикселей. Затем мы использовали метод fillText() для отрисовки красного жирного текста со смещением по X и Y в 50 пикселей.

Результатом будет текст с тенью, как на изображении ниже: