createLinearGradient for fillStyle() gradient to draw colour betweeen two points on a Canvas

Show line showing Gradient Path (x1,y1,x2,y2)

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

Rectangle Position

Linear Gradient Positions

Start Colour End Colour

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

x1: X- Axis, Start Position from left edge of the canvas,
y1: Y- Asix, Start Position from Top edge of the canvas,
x2: X- Axis, End Position from left edge of the canvas,
y2: Y- Asix, End Position from Top edge of the canvas,

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

createLinearGradient() to draw linear colour gradients

Subscribe