Change the properties of a canvas gradient object

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 closed loop. This code is pretty inefficient because I use the constructor to change as one property in each loop. How can I change one 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 he talks about fillStyle and strokeStyle ...

, , . , , CanvasGradient CanvasPattern, . ( .)

, addColorStop.

, , - , ; , ? , , - . ?