Canvas Motion Blur (HTML Background)

An alternate way to do a canvas motion blur that will work with an HTML background. It is not as performant as the previous example.

HTML

<div>
    <div>Move your mouse to see the motion blur.</div>
    <canvas id="canvas" width="256" height="256"></canvas>
</div>

CSS

div {
    background: url(http://audia7.sg/images/design-exterior-feature6.91e4dea1.jpg);
    color: #fff;
    font-family: arial;
    font-size: 11px;
    padding: 5px;
}
div > div {
    background: transparent;
    margin-bottom: 10px;
}

JavaScript

var canvas = document.getElementById('canvas');
var screen = canvas.getContext('2d');

var frameIndex = 0;
var frames = [];
for (var i = 0; i < 7; ++i) {
    var frame = {
        canvas: document.createElement('canvas'),
    };
    frame.canvas.width = canvas.width;
    frame.canvas.height = canvas.height;
    frame.context = frame.canvas.getContext('2d');
    frames.push(frame);
}

var mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', function(event) {
    mouseX = event.pageX - canvas.offsetLeft;
    mouseY = event.pageY - canvas.offsetTop;
}, false);

(function loop() {
    var context = frames[frameIndex].context;
    var x1 = mouseX;
    var y1 = mouseY;
    var x2 = x1 + 32;
    var y2 = y1 + 32;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = 'rgb(0, 255, 255)';
    context.fillRect(x1, y1, 32, 32);
    context.fillStyle = 'rgb(255, 0, 255)';
    context.fillRect(x2, y1, 32, 32);
    context.fillStyle = 'rgb(255, 255, 0)';
    context.fillRect(x1, y2, 32, 32);
    context.fillStyle = 'rgb(0, 0, 0)';
    context.fillRect(x2, y2, 32, 32);

    screen.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 1; i <= frames.length; ++i) {
        var frame = frames[(frameIndex + i) % frames.length];
        var alpha = (i / frames.length);
        if (i < frames.length) alpha *= 0.35;
        screen.globalAlpha = alpha;
        screen.drawImage(frame.canvas, 0, 0);
    }
    
    frameIndex = (frameIndex + 1) % frames.length;
    
    setTimeout(loop, 1 / 30);
})();