Метод createRadialGradient

Создает объект радиального градиента.

Синтаксис

createRadialGradient(x1,y1,r1,x2,y2,r2)

Параметры

• x1,y1,r1 — координаты центра и радиус первой окружности;
• x2,y2,r2 — координаты центра и радиус второй окружности.

После создания объекта градиента, можно ему присвоить цвета с помощью метода addColorStop. Градиент появится на холсте после применения метода fill() или stroke().

Пример

var canvas = document.getElementById("picture");
var ctx = canvas.getContext("2d");
	
var radgrad = ctx.createRadialGradient(105,105,20,112,120,50);  
radgrad.addColorStop(0, "#FF5F98");  
radgrad.addColorStop(0.75, "#FF0188");  
radgrad.addColorStop(1, "rgba(255,1,136,0)");  
  
ctx.fillStyle = radgrad;  
ctx.fillRect(0,0,250,250); 

В живую.