createRaidalGradient for fillStyle() gradient to draw colour gradient betweeen two radial circles on a Canvas

Show circles showing Gradient Path (x1,y1,r1,x2,y2,r2)

Click the colour table below ( select two ) for gradient colours

Rectangle Position

Radial Gradient Positions

addColorStop or start Colour addColorStop or End Colour

my_gradient=gctx.createLinearGradient(x1,y1,x2,y2);

x1: X- Axis Position of center of the first Circle from Left edge,
y1: Y- Axis Position of center of the first Circle from top,
r1: Radius of first Circle x2: X- Axis Position of center of the Second Circle from Left edge,
y2: Y- Axis Position of center of the Second Circle from top,
r1: Radius of Second Circle

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.beginPath();
my_gradient=gctx.createRadialGradient(150,100,20,150,100,70);
my_gradient.addColorStop(0,'#f50000');
my_gradient.addColorStop(1,'#8cf5f5');
gctx.fillStyle=my_gradient;
gctx.fillRect(20,20,150,180);

createRadialGradient() to draw Radial colour gradients

Subscribe