Compositing

alpha-ing out a section based on a lightness

by rob Davis

HTML

<body>
    <canvas id="myCanvas" width="578" height="500"></canvas>
  </body>

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = 500;
var height = 500;

      context.rect(0, 0, width,height);

      // create radial gradient
      var grd = context.createRadialGradient(width/2, height/2, 0, width/2, height/2, 150);
      grd.addColorStop(0, '#fff');
      grd.addColorStop(1, '#000');

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

//drawGrid(width,height,.9,'#ff0');
//drawGrid(width,height,.8,'#f00');
//drawGrid(width,height,.7,'#0f0');
//drawGrid(width,height,.6,'#00f');
//drawGrid(width,height,.5,'#ff0');
//drawGrid(width,height,.4,'#f00');
//drawGrid(width,height,.3,'#0f0');
//drawGrid(width,height,.2,'#00f');
//drawGrid(width,height,.1,'#ff0');

context.globalCompositeOperation = 'destination-out'
// 'copy' 'darker' 'lighter' 'destination-atop' 'destination-out' 'destination-in' 'destination-over' 'source-atop' 'source-out' 'source-in' 'source-over';
drawGrid(width,height,.1,'#00f');






function drawGrid(w,h,d,style)
{
    context.beginPath();
    var x=0;
    var y=0;
    for (y=0;y<h;y+=(h*d)){
            context.moveTo(x, y);
            context.lineTo(w, y);
    }
    y=0;
    for (var x=0;x<w;x+=(w*d)){
            context.moveTo(x, y);
            context.lineTo(x, h);
    }
    context.fillStyle=style;
    context.fillRect(0,0,w*d,h*d);
    context.fill();
    //context.lineWidth = 7;
    context.strokeStyle=style;
    context.stroke();
}