A Pen by Davi Reinke.

Eraser.markdown

Eraser

A Pen by Davi Reinke on CodePen.

License.

index.html

<iframe src="http://www.w3schools.com/" scrolling="no"></iframe>
<canvas id="canvas" width="1024" height="768">
    <h1>no canvas</h1>
</canvas>

script.js

$(window).on('load', function () {
    var can = $('#canvas')[0],
        ctx = can.getContext('2d'),  
        img = new Image(),
        mouse = {x: -100, y: -100};
    
    img.src = 'http://lorempixel.com/1024/768/';
    img.onload = function(){
        ctx.drawImage(img, 0, 0, 1024, 768);

        // track mouse
        $('#canvas').on('mousemove', function (evt) {    
            mouse.x = evt.offsetX;
            mouse.y = evt.offsetY;
        });
    
        setInterval(update, 50);
        
        function update() {
            var x = mouse.x,
                y = mouse.y,
                r = 100,
                grad = ctx.createRadialGradient(x, y, 0, x, y, r);
    
            grad.addColorStop(0, "rgba(0, 0, 0, 255)");
            grad.addColorStop(1, "rgba(0, 0, 0, 0)");
          
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillStyle = grad;
            ctx.arc(x, y, r, 0, 2 * Math.PI, true);
            ctx.fill();
        }
    }
});

style.css

iframe,canvas {
  width:1024px;
  height:768px;
  position:absolute;
  top:0;
  left:0;
  border:0;
  z-index:1;
}
canvas {
  z-index:2;
}