HTML5 Fireworks 1.1

HTML

<table>
<tr>
<td colspan="4">
<canvas id="console1" width="400" height="400" onclick="runFireworks('console1');
runFireworks('console2');
runFireworks('console3');
runFireworks('console4');
runFireworks('console5');
runFireworks('console6');
runFireworks('console7');
runFireworks('console8');
runFireworks('console9');
runFireworks('console10');
runFireworks('console11');
runFireworks('console12');
runFireworks('console13');
runFireworks('console14');" style="border: solid 1px;" />
</td>
<td colspan="4">
<canvas id="console2" width="400" height="400" onclick="runFireworks('console2')" style="border: solid 1px;" />
</td>
</tr>
<tr>
<td colspan="2">
<canvas id="console3" width="200" height="200" onclick="runFireworks('console3')" style="border: solid 1px;" />
</td>
<td colspan="2">
<canvas id="console4" width="200" height="200" onclick="runFireworks('console4')" style="border: solid 1px;" />
</td>
<td colspan="2">
<canvas id="console5" width="200" height="200" onclick="runFireworks('console5')" style="border: solid 1px;" />
</td>
<td colspan="2">
<canvas id="console6" width="200" height="200" onclick="runFireworks('console6')" style="border: solid 1px;" />
</td>
</tr>
<tr>
<td>
<canvas id="console7" width="100" height="100" onclick="runFireworks('console7')" style="border: solid 1px;" />
</td>
<td>
<canvas id="console8" width="100" height="100" onclick="runFireworks('console8')" style="border: solid 1px;" />
</td>
<td>
<canvas id="console9" width="100" height="100" onclick="runFireworks('console9')" style="border: solid 1px;" />
</td>
<td>
<canvas id="console10" width="100" height="100" onclick="runFireworks('console10')" style="border: solid 1px;" />
</td>
<td>
<canvas id="console11" width="100" height="100" onclick="runFireworks('console11')" style="border: solid 1px;" />
</td>
<td>
<canvas id="console12" width="100" height="100" onclick="runFireworks('console12')" style="border: solid 1px;" />
</td>
<td>
<canvas id="console13" width="100" height="100"...

JavaScript

var fireworksShows;

function fireworksShow (canvasID, canvasWidth, canvasHeight)
{
    this.canvasID = canvasID;
    this.canvasWidth = canvasWidth;
    this.canvasHeight = canvasHeight;
    this.rocketX = Math.floor(canvasWidth / 2);
    this.rocketY = canvasHeight;
    this.burstHeight = Math.floor(canvasHeight / 2);
    this.rocketCount = 0;
    this.clearCount = Math.floor(Math.random() * 5) + 5;
    this.burstSize = Math.floor(canvasWidth / 2);
    this.burstTimer = Math.floor(canvasWidth / 1.5);
    this.burstParticles = new Array(0);
    this.burstType = chooseRandomly('animated', 'static');
}

function particle (x, y, color)
{
    this.x = x;
    this.y = y;
    this.direction = Math.floor(Math.random() * 8);
    this.color = color;
    this.size = 1;
}

function runFireworks (canvasID)
{
    // Initialize.
    if (fireworksShows === undefined || fireworksShows === null)
        fireworksShows = new Array(0);
    
    // Save calling canvas as a new fireworks show.
    var width = document.getElementById(canvasID).getAttribute('width');
    var height = document.getElementById(canvasID).getAttribute('height');
    fireworksShows.push(new fireworksShow(canvasID, width, height));
    
    // Hack.
    if (fireworksShows.length > 1)
    {
        fireworksShows[0].burstType = 'static';
        fireworksShows[1].burstType = 'animated';
    }
    
    // Prepare sky.
    clearCanvas(fireworksShows[fireworksShows.length - 1]);
    
    // Launch fireworks.
    if (fireworksShows.length === 1)
        setInterval(function() { fireBullets(); }, 10);
}

function fireBullets ()
{
    // Update bullets for all fireworks shows.
    for (var i = 0; i < fireworksShows.length; i++)
        fireBullet(fireworksShows[i], 3);
}

// TODO refactor into smaller functions
function fireBullet (fireshow, speed)
{
    // Determine the appropriate bullet size.
    // TODO possibly scale bullet size based on canvas size
    var bulletSize;
    if ((fireshow.canvasWidth *...