Simple javascript canvas particle system

Today I had some time over and wanted to test out the html5 canvas so I set up to build a quick and dirty particle fountain in javascript.

It is nothing fancy, just something i put togheter in 30 minutes.

Here is a demo: http://blog.warzone.se/demos/particlefountain/

Javascript:

/**
 *
 * Just a simple javascript particle fountain
 * written by Thomas Brunström, thomas.brunstrom@sogeti.se
 * 
 */
window.onload = function() {
    var i,
    canHolder = document.getElementById('canvas'), // The div that we append the canvas to.
    canvas = document.createElement("canvas"), // Create a canvas object
    windowSize = {x : window.innerWidth, y : window.innerHeight}, // Window size
    mouseLoc = { x : (windowSize.x / 2), y : (windowSize.y / 2)}, // Mouse location
    ctx = canvas.getContext("2d"), // getContext to draw with.
    objects = [], // Array to hold the objects that we draw
    render = function() {
	// Clear the canvas
	ctx.fillStyle = "rgba(0,0,0,1)";
	ctx.fillRect(0,0,windowSize.x,windowSize.y);
	// Loop through all the objects and move them according to their speed and direction
	for(i = 0;i<objects.length;i++) {
	    objects[i].xS += objects[i].speedX;
	    objects[i].yS += objects[i].speedY
	    ctx.fillStyle = objects[i].col;
	    ctx.fillRect(objects[i].xS,objects[i].yS,2,2);
	    // If the object is outside the visible area of the
	    // browserwindow we redraw the object at the mouse posiiton
	    if(objects[i].xS > windowSize.x
	       || objects[i].yS > windowSize.y
	       || objects[i].yS < 0
	       || objects[i].xS < 0) {
		objects[i] = createObject();
	    }
	}
	setTimeout(render,(1000/60));//Set timeout, ~60 updates per second.
    },
    // Helper function to generate a object
    createObject = function() {
	return {
	    col : 'rgba(' + Math.round(Math.random() * 255) + ','
	    + Math.round(Math.random() * 255) + ','
	    + Math.round(Math.random() * 255)+ ',1)', //Color on object
	    speedX : ((Math.random() * 14) - 7),//Speed x
	    speedY : ((Math.random() * 14) - 7),//Speed y
	    yS : mouseLoc.y, //yStart -> position
	    xS : mouseLoc.x //xStart -> position
	};
    };
    // Save the mouse location so we can render from where the mouse is
    canvas.onmousemove = function(e) {
	mouseLoc = {x : e.clientX, y : e.clientY }; 
    };
    // Set up the height and width of the canvas 
    canvas.height = windowSize.y; 
    canvas.width = windowSize.x;
    // Set the background on the canvas to black
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.fillRect(0,0,windowSize.x,windowSize.y);
    // Append the canvas to the DOM
    canHolder.appendChild(canvas);
    // Create the objects
    for(i=0;i<1000;i++) {
	objects.push(
	    createObject()
	);
	
    }
    // Lets start drawing the objects
    setTimeout(render,(1000/60));    
};

Html

<!DOCTYPE html>
<html>
<head>
    <title>Canvastest</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="canvas"></div>
</body>
<script type="text/javascript" src="./script.js" ></script>
</html>

Css:

* {margin: 0; padding:0;}
body {margin: 0; padding:0; height: 100%; width: 100%;overflow: hidden;}
canvas {z-index: 5;}