CODEWITHSUNDEEP
javascripthtmlcanvasgradient
ComFreek
ComFreek

Reputation: 29414

How to make a rotating gradient (on a circle)?

I create a simple circle with the arc function:

/* ctx is the 2d context */ 
ctx.beginPath();
  var gradient = ctx.createLinearGradient(0, 0, this.radius, this.radius);
  gradient.addColorStop(0, '#FF0000');
  gradient.addColorStop(1, '#FFFFFF');
  ctx.lineWidth = 10;

  ctx.arc(this.radius, this.radius, this.radius, 0, 2*Math.PI, true);
  ctx.strokeStyle = gradient;
ctx.stroke();

So I want to rotate the gradient, is that possible? I've tried with ctx.rotate(x) but that rotates the whole circle!

Upvotes: 2

Views: 1786

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63802

Yes. Your gradient is going from x1,y1 to x2,y2, which are the four last arguments of createLinearGradient

For example, to reverse your gradient do this:

var gradient = ctx.createLinearGradient(this.radius, this.radius, 0, 0);

Or change it up however you please:

var gradient = ctx.createLinearGradient(this.radius, 0, 0, 0);

And so on.

Upvotes: 3

Related Questions