How can I plot a gradient line in HTML canvas?

Question

I am trying to draw a line which is a gradient. How is that possible in canvas?

Are you looking for something like this : http://diveintohtml5.org/canvas.html#gradients ? — MD Sayem Ahmed, Sep 24 '11 at 19:21
yes. I wanted to apply it to a line and I figured out the ctx.strokeStyle works. — Nasir, Sep 26 '11 at 13:53

score 47 · Accepted Answer · answered Sep 24 '11 at 20:34

47

Yes. Example:

// linear gradient from start to end of line
var grad= ctx.createLinearGradient(50, 50, 150, 150);
grad.addColorStop(0, "red");
grad.addColorStop(1, "green");

ctx.strokeStyle = grad;

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,150);

ctx.stroke();

See it in action here:

http://jsfiddle.net/9bMPD/

answered Sep 24 '11 at 20:34

Simon Sarris

60,553
13
135
167

4

Just a note that the gradient is not follow the circle but is linear. It will not be uniformly distributed. You make it more uniform by splitting the circle into several parts and creating separate gradient for each part. – Viesturs May 30 '13 at 12:08

How can I plot a gradient line in HTML canvas?

1 Answers1

Linked

Related