createRadialGradient() to draw Radial colour gradients



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);


plus2net.com




Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer