Fog of war

by Foub12

HTML

<div>
	<img src="http://img.clubic.com/photo/02024672.jpg" />
	<canvas id="monCanvas" width="1280" height="800"></canvas>
</div>

CSS

canvas
{
    position: absolute;
    top     : 0px;
    left    : 0px;
    z-index : 100;
}

JavaScript

var r1 = 70, r2 = 120;

// Add a clear() and clear(preserveTransform:boolean) methods to clear
// a canvas.
CanvasRenderingContext2D.prototype.clear = 
    CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
        if (preserveTransform) {
            this.save();
            this.setTransform(1, 0, 0, 1, 0, 0);
        }
        
        this.clearRect(0, 0, this.canvas.width, this.canvas.height);
        
        if (preserveTransform) {
            this.restore();
        }           
    };

// Point object definition.
function Point(x, y) 
{
    this.x = x;
    this.y = y;
    
    this.constructor.prototype.equals = function(pt)
    {
        return this.x == pt.x && this.y == pt.y;
    }
}

// Rectangle object definition.
function Rectangle(ptStart, ptEnd)
{
    this.start = ptStart;
    this.end = ptEnd;
    
    this.constructor.prototype.min = function(pt1, pt2) 
    {
        return new Point(Math.min(pt1.x, pt2.x), Math.min(pt1.y, pt2.y));
    }
    
    this.constructor.prototype.max = function(pt1, pt2) 
    {
        return new Point(Math.max(pt1.x, pt2.x), Math.max(pt1.y, pt2.y));
    }
    
    this.constructor.prototype.contains = function(pt)
    {
        return pt.equals(this.max(this.start, this.min(this.end, pt)));
    }
    
    this.constructor.prototype.width = function()
    {
        return (this.end.x - this.start.x);
    }
    
    this.constructor.prototype.height = function()
    {
        return (this.end.y - this.start.y);
    }
}

// points without fog of war to simulate units position
var visiblePoints = [];
visiblePoints.push(new Point(150, 150));
visiblePoints.push(new Point(500, 500));
visiblePoints.push(new Point(800, 100));

var monCanvas = document.getElementById("monCanvas");
var ctx = monCanvas.getContext("2d");

// initialization of canvas to display fog of war
function init()
{
    console.log("Nb points : " + visiblePoints.length);
    
    var canvasMemory = document.createElement("canvas");
...