Canvas electric pulse

by Eddie Lin

HTML

<h1>Mouse over to see the pulse</h1>
<canvas id="pulse" width="400" height="300"></canvas>

CSS

#pulse {
    background: #000000;
}

JavaScript

var canvas = document.getElementById('pulse');
var context = canvas.getContext('2d');
context.lineWidth=5;
context.strokeStyle= '#FFFFFF';

var maxOffsetX = 50;
var maxOffsetY = 50;
var initAlter = 1;

var randomOffset = function() {
    return {x: Math.random()*maxOffsetX, y: Math.random()*maxOffsetY};
}

var drawPulse = function(alt) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    var currentX = 0;
    context.restore();
    context.beginPath();
    context.moveTo(0, canvas.height/2);
    while(true) {
        if (0 == currentX) {
            context.lineTo(currentX += randomOffset().x, canvas.height/2);
        }
        else if (canvas.width - currentX < maxOffsetX*1.5) {
            context.lineTo(canvas.width - randomOffset().x, canvas.height/2);
            context.lineTo(canvas.width, canvas.height/2);
            break;
        }
        else {
            context.lineTo(currentX += randomOffset().x, canvas.height/2 + alt*randomOffset().y);
            alt *= -1;
        }
    }
    context.lineJoin = 'miter';
    context.stroke();
}

var intervalId;

canvas.addEventListener('mouseover', function() {
    intervalId = setInterval(function() {
        drawPulse(initAlter);
        initAlter *= -1;
    }, 100);
});
canvas.addEventListener('mouseout', function() {
    if (intervalId != undefined) {
        clearInterval(intervalId);
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
});