Question

I have a problem while trying to use createLinearGradient

//linear gradient
canvas.beginPath();
canvas.arc(350,400,100,0,2*Math.PI,false);
canvas.strokeStyle = 'lightblue';

var grad = canvas.createLinearGradient(350,110,100,0);  //(x0,y0) to (x1,y1)
grad.addColorStop(0,'red');
grad.addColorStop(1,'yellow');
grad.fillStyle = grad;
canvas.fill();
canvas.stroke();

the problem is that the linear gradient on the circle doesn’t work. the circle itself showing fine..

before that code i have “canvas.fillStyle = ‘green’;” so the circle is green, not red or yellow. so maybe i forgot about something..

Thanks!
(btw i use chrome and this effect working fine on other things)

Answer 1

canvas.fillStyle = grad;, not grad.fillStyle = grad;!

Getting the gradient to do exactly what you want is another problem 🙂

It looks all red right now, but if you changed the x/y values you’d be able to see the gradient. For instance:

var grad = canvas.createLinearGradient(350,110,100,330);

Would do the trick.

http://jsfiddle.net/3EzUq/

---

I don’t think you should call the context canvas. I’d recommend ctx or context instead. It’s not a big deal but you’ll confuse collaborators someday.