Как применить эффект размытия на Canvas?

@marc_zboncak 

Для применения эффекта размытия на Canvas необходимо использовать метод blur(), который принимает один аргумент - радиус размытия.

Пример применения эффекта размытия на Canvas:

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

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

// Рисуем круг
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2*Math.PI);
ctx.fillStyle = '#FF0000';
ctx.fill();

// Применяем эффект размытия
ctx.filter = 'blur(10px)';
ctx.fill();

В данном примере круг будет нарисован на холсте, а затем применен эффект размытия с радиусом 10 пикселей. Конечный результат будет иметь размытый эффект вокруг круга.