Canvas and globalCompositeOperations

Hey, I have the following code, that gives you the effect of a "mask".

JSFiddle: http://jsfiddle.net/neuroflux/m5Fj2/7/

Basically, I would like a semi-opaque gradient instead of a circle... I tried to put the following code in, but to no advail.

grad = ctx.createRadialGradient(0,0,0,0,0,600); 
  grad.addColorStop(0, '#000');
  grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');

  // assign gradients to fill
  ctx.fillStyle = grad;

  // draw 600x600 fill
  ctx.fillRect(0,0,600,600);

But I couldn't get 开发者_运维技巧it to work :'(

HELP (please!).

First off,

        tmpCanvas = document.createElement('canvas');
        tmpCanvas.width = c.width;
        tmpCanvas.height = c.height;

        tmpCtx = tmpCanvas.getContext('2d');

Is the kind of stuff you never want to do in a loop. Right now you are creating a new canvas every 40 milliseconds! That's nuts!

Secondly, if you want a semi-opaque gradient, why don't you not use globalCompositeOperations at all and just use half-transparent colors?

Add alpha to the colors, like this:

 // half transparent
grad.addColorStop(0, 'rgba(0,0,0,.5)');
grad.addColorStop(1, 'rgba(' + color + ', ' + color + ', ' + color + '0.5)');