MouseMask

by David McClelland

HTML

<canvas id="canvas" height='637' width='932' ></canvas>

CSS

canvas { border: 2px solid black; height: 637px; width: 932px; }

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var mouse = {x: 0, y: 0}; //make an object to hold mouse position
var startCoords = {x: 0, y: 0};
var last = {x: 0, y: 0};
var isDown = false;
var scale = 2;

var img = new Image();
img.src = "http://magickcanoe.com/moths/io-moth-1-large.jpg";

function render() {
    'use strict';
    ctx.beginPath();
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.fillRect(0, 0, canvas.width, canvas.height); //fill the background. color is default black
    ctx.arc(mouse.x, mouse.y, 250, 0, 6.28, false);//draw the circle
    ctx.restore();
    ctx.save();
    ctx.clip();//call the clip method so the next render is clipped in last path
    ctx.drawImage(img, 0, 0,
                  img.width * scale, img.height * scale);
    ctx.closePath();
    ctx.restore();
}
setInterval(render, 100);// set the animation into motion

canvas.onmousemove = function (e) {
    'use strict';
    var xVal = e.pageX - this.offsetLeft,
        yVal = e.pageY - this.offsetTop;
    mouse = {x: e.pageX,
             y: e.pageY};
    if (isDown) {
        ctx.setTransform(1, 0, 0, 1,
                         xVal - startCoords.x,
                         yVal - startCoords.y);
    }
};

canvas.onmousedown = function (e) {
    'use strict';
    isDown = true;
    startCoords = {x: e.pageX - this.offsetLeft - last.x,
                   y: e.pageY - this.offsetTop - last.y};
};

canvas.onmouseup   = function (e) {
    'use strict';
    isDown = false;
    last = {x: e.pageX - this.offsetLeft - startCoords.x,
            y: e.pageY - this.offsetTop - startCoords.y};
};