Animated Beams

I wanted to try out the 2d drawing features of the canvas element. It's suprisingly easy to use!

HTML

<canvas id="zCanvas" width="600" height="600"></canvas>

CSS

body{
    margin: 0px;
    padding: 0px;
}

#zCanvas{
    border: 1px solid #9C9898;
}

JavaScript

var canvas;
var context;
var t;
var centerX = 300;
var centerY = 590;

function beamIt(x1, y1, x2, y2, color, percentage) {
    var xx1 = centerX - (x1 / 100 * percentage);
    var yy1 = centerY - (y1 / 100 * percentage);
    var xx2 = centerX - (x2 / 100 * percentage);
    var yy2 = centerY - (y2 / 100 * percentage);

    context.beginPath();
    context.moveTo(centerX, centerY);
    context.lineTo(xx1, yy1);
    context.moveTo(centerX, centerY);
    context.lineTo(xx2, yy2);
    context.lineTo(xx1, yy1);
    context.lineJoin = "miter";
    context.fillStyle = color;
    context.fill();

    if (percentage < 100) {
        percentage += 1;
        t = setTimeout("beamIt('" + x1 + "','" + y1 + "','" + x2 + "','" + y2 + "','" + color + "'," + percentage + ")", 10);
    }
}

function animateBeam(x1, y1, x2, y2, color, percentage) {
    //Bottom line math
    var a1 = 300;
    var b1 = 590 - y1;
    var c1 = Math.sqrt((a1 * a1) + (b1 * b1));

    //Top line math
    var a2 = 300;
    var b2 = 590 - y2;
    var c2 = Math.sqrt((a2 * a2) + (b2 * b2));

    //Coords to lengths
    x1 = centerX - x1;
    y1 = centerY - y1;
    x2 = centerX - x2;
    y2 = centerY - y2;

    beamIt(x1, y1, x2, y2, color, percentage);
}

window.onload = function() {
    canvas = document.getElementById("zCanvas");
    context = canvas.getContext("2d");

    animateBeam(0, 240, 0, 0, "#8C041D", 1);
    animateBeam(0, 0, 150, 0, "#84BFAE", 1);
    animateBeam(150, 0, 300, 0, "#F2E9CE", 1);
    animateBeam(150, 0, 300, 0, "#F2E9CE", 1);
    animateBeam(450, 0, 600, 0, "#E4B556", 1);
    animateBeam(600, 0, 600, 240, "#26241F", 1);
};