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?