performance html 5 canvas raster
HTML
<canvas id="c" style="z-index:1;"></canvas>
CSS
canvas {
overflow:hidden;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
html {
width:100%;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
JavaScript
var can = document.getElementById("c");
var ctx = can.getContext("2d");
can.width = window.innerWidth;
can.height = window.innerHeight;
w = window.innerWidth;
h = window.innerHeight;
var img = new Image();
img.onload = function () {};
img.src = "http://placekitten.com/500/500";
function redraw(mouse) {
ctx.save();
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 100, 0, Math.PI * 2, true);
ctx.clip();
ctx.drawImage(img, 0, 0, w, h);
ctx.restore();
}
can.addEventListener("mousemove", function (e) {
var mouse = {
x: e.pageX,
y: e.pageY
};
redraw(mouse);
}, false);