Change canvas gradient object's properties.

Question

var i = 0;
var x = 960;
var y = 540;
var interval = window.setInterval(render, 100);

function render()
{

gradient = cxt.createRadialGradient(x, y, i, x, y, i+10);
gradient.addColorStop(0, "rgba(0,0,0,0)");//white inside 
gradient.addColorStop(.4, "rgba(255,255,255,1)");//white inside 
gradient.addColorStop(.6, "rgba(255,255,255,1)");//white inside 
gradient.addColorStop(1, "rgba(0,0,0,0)");//fade to transparent black outside;

cxt.fillStyle= "#000000";
cxt.fillRect(0,0,WIDTH,HEIGHT);
cxt.fillStyle = gradient;
cxt.fillRect(0,0,WIDTH,HEIGHT);
cxt.fill();
cxt.drawImage(logo,0,0);
i+=5;

}

I'm trying to animate a feathered loop expanding. This code is pretty inefficient, because I'm using the constructor to change as single property each loop. How can I change a single property that is passed as a parameter to the constructor?

Answer 1

From the Canvas specs...

interface CanvasGradient {
  // opaque object
  void addColorStop(in float offset, in DOMString color);
};

...and earlier it says about fillStyle and strokeStyle...

On getting, if the value is a color, then the serialization of the color must be returned. Otherwise, if it is not a color but a CanvasGradient or CanvasPattern, then the respective object must be returned. (Such objects are opaque and therefore only useful for assigning to other attributes or for comparison to other gradients or patterns.)

Lastly, introspecting a gradient just reveals the addColorStop function.

So I think the constructor is the only place those values can be set; but are you sure the constructor is really slowing it down? If your animation is slow maybe it's something else. Have you timed it?