GCO - Scanner Fill and Subtract, 50% Opacity

by gbarnett

HTML

<canvas id="map" width="400" height="300"></canvas>

CSS

#map {
    background: url(http://droneage.com/img/battle/bg/starfield-navy.jpg)
}

JavaScript

var points = [ {x:120,y:110}, {x:150,y:190}, {x:280,y:150}];

var renderMarker = function(point) {
    ctx.save();
    ctx.translate(point.x, point.y);
    ctx.rotate(Math.PI/4);
    ctx.fillRect(-5,-5,10,10);
    ctx.restore();
};

var renderScannerFill = function(point, radius) {
    ctx.save();
    ctx.translate(point.x, point.y);
    ctx.beginPath();
    ctx.arc(0,0,radius,0,2*Math.PI);
    ctx.fill();
    ctx.restore();
};

var ctx = document.getElementById('map').getContext('2d');
ctx.fillStyle = "rgba(120,256,120,0.3)";

var i;
for(i=0; i<points.length; i++) {
    renderScannerFill(points[i], 75);
    renderMarker(points[i]);
}
ctx.save();
ctx.globalCompositeOperation = "destination-out";
ctx.fillStyle = "rgba(0,0,0,1)"; // destination-out only cares about opacity
for(i=0; i<points.length; i++) {
    renderScannerFill(points[i], 70);
}
ctx.restore();
ctx.fillStyle = "rgba(120,256,120,0.7)";
for(i=0; i<points.length; i++) {
    renderMarker(points[i]);
}