function canvasApp()
{

	var theCanvas = document.getElementById("canvas");
	var context = theCanvas.getContext("2d");
	
	var mouseX;
	var mouseY;
	
	var ballX = 20;
	var ballY = 20;
	var ballSpeed;
	
	var game = document.getElementById("canvas");
	
	// mouse events
	game.addEventListener("mouseup",eventMouseUp, false);
	//game.addEventListener("mousedown",eventMouseDown, false);
	game.addEventListener("mousemove",eventMouseMove, false);
	

	function draw()
	{
		
		canvas.width = canvas.width;
		
		context.font = "Verdana";
		context.fillStyle = "#000000";
		context.fillText("BOUNCING BALL 1.0",15,8);
		context.strokeStyle = "black"; //need list of available colors
		
		
		context.lineWidth = 10;
		context.lineJoin = 'round'
		context.lineCap = 'butt';
		context.beginPath();
		context.moveTo(15, 15);
		context.lineTo(695, 20);
		context.lineTo(695, 395);
		context.lineTo(20, 395);
		context.lineTo(20, 20);
		context.stroke();
		context.closePath();
		
		
	
		circle(Math.random()*500 + 100,Math.random()*200 +100,Math.random()*100);
		circle(Math.random()*500 + 100,Math.random()*200 +100,Math.random()*100);
		circle(Math.random()*500 + 100,Math.random()*200 +100,Math.random()*100);
		circle(Math.random()*500 + 100,Math.random()*200 +100,Math.random()*100);
		circle(Math.random()*500 + 100,Math.random()*200 +100,Math.random()*100);
		circle(Math.random()*500 + 100,Math.random()*200 +100,Math.random()*100);
		circle(Math.random()*500 + 100,Math.random()*200 +100,Math.random()*100);
		
		var img    = canvas.toDataURL("image/png");
		
		$('#icons').append('<img src="'+img+'"/>');
	}
	
	function circle(x,y,radius)
	{
		context.beginPath();
		context.strokeStyle = "black";
		context.lineWidth = 5;
		context.arc(x, y, radius, (Math.PI/Math.random())*Math.random()*10, (Math.PI/180)*Math.random()*100, false);
		//full circle
		context.stroke();
		context.closePath();
	}
	
	function eventMouseMove(event)
	{
		if ( event.layerX || event.layerX == 0) { // Firefox
			mouseX = event.layerX ; mouseY = event.layerY;
		} else if (event.offsetX || event.offsetX == 0) { // Opera mouseX = event.offsetX;
		mouseY = event.offsetY;
		}
	}
	
	function eventMouseUp(event)
	{

		
	}
	
	var FRAME_RATE = 1;
	var intervalTime = 1000/FRAME_RATE;
	setInterval(draw, intervalTime );
	
	draw();
}