another composite

erasing with canvas, add a background

by rob Davis

HTML

<html>
<body style="background: url(http://jsfiddle.net/css/../img/logo.png) repeat;">

<canvas id="canvas" width="256" height="256"></canvas>

</body>
</html>

JavaScript

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

// Put something in the canvas first
ctx.fillStyle = '#f00';
ctx.fillRect(10,10,236,236);

// Set up erasing 
ctx.globalCompositeOperation = "destination-out";
ctx.strokeStyle = 'rgba(0,0,0,1.0)';

// And draw a thick line that removes what's already there

var width=236;
var height=236;
ctx.rect(0, 0, width,height);

      // create radial gradient
      var grd = ctx.createRadialGradient(width/2, height/2, 100, width/2, height/2, width);
      // light blue
      grd.addColorStop(0, "rgba(255,255,255,1)");
      // dark blue
      grd.addColorStop(1, "rgba(255,255,255,0)");

      ctx.fillStyle = grd;
      ctx.fill();