HTML5 Canvas Tag Test

First go with JSFiddle, webpage Javascript, and the <canvas> tag.

by Will Stott

HTML

<p><canvas id="canvas" width="600" height="450"></canvas>
    
    
    <div id="scores"><p id="CurrentScore">Loading</p><p id="hiScore">Please wait...</p></div></p>
<div id="title">HTML5 Canvas Test</div>
<div id="message"></div>

CSS

#scores  {position: absolute; top: 10px; right: 250px; color:#ffffff; font-family:"Verdana", sans-serif;}
#title  {position: absolute; top: 10px; left: 25px; color:#ffffff; font-family:"Verdana", sans-serif;}
#message  {position: absolute; top: 430px; left: 25px; color:#ffffff; font-family:"Verdana", sans-serif;}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var mouseDown = 0;
//ctx.fillRect(0, 0, 600, 450);
var variation = 2;
var maxOffset = 80;
var levelThickness = 0;
var heliPos = 200;
var heliSpeed = 5;
var boxPos = 600;
var score = 0;
var hiScore = 0;
boxY = Math.floor(Math.random() * 350);

var i = 0;
var p = 0;
var x = 0;

function makeGeom(geomArray) {
    i = 0;
    if (geomArray[61]) {
        while (i < 60) {
            geomArray[i] = 2 * p;
            if (variation * x < maxOffset) {
                p = p + 1;
                x = x + 1;
            } else {
                p = p - 1;
                if (variation * p < 2) {
                    variation = Math.floor(Math.random() * 10) + 2;
                    x = 0;
                }
            }

            i = i + 1;
        }
        geomArray[61] = 0;
    } else {
        //HERE!!
        i = 0;
        while (i < 60) {
            geomArray[i] = geomArray[i + 1];
            i = i + 1;
        }

        if (variation * x < maxOffset) {
            p = p + 1;
            x = x + 1;
        } else {
            p = p - 1;
            if (variation * p < 2) {
                x = 0;
                variation = Math.floor(Math.random() * 10) + 2;
            }
        }
        geomArray[60] = (2 * p) + Math.floor(Math.random() * 5);
    }
}

function drawTopGeom(geomArray) {
    i = 0;
    while (i < 60) {
        i = i + 1;
        ctx.fillRect(10 * i, 0, 10, 50 + geomArray[i]);
    }
    if (boxPos < 0) {
        boxPos = 600;
        boxY = Math.floor(Math.random() * 350) + geomArray[60];
    }
    ctx.fillRect(boxPos, boxY, 10, 100);
}

function drawBottGeom(geomArray) {
    i = 0;
    a = 0;
    while (i < 60) {
        i = i + 1;
        a = maxOffset - geomArray[i];
        ctx.fillRect(10 * i, 430 - a, 10, 20 + a);
    }
}

function kill() {
    heliPos = 200;
    if (score > hiScore) {
        hiScore = score;
    }
    score = 0;
    mouseDown =...