function prepareCanvas() {
	var canvasDivElement = document.getElementById('canvas');  
	//var context = canvas.getContext('2d'); 

	var canvas = document.createElement('canvas');
	canvas.setAttribute('id', 'mycanvas');
	canvasDivElement.appendChild(canvas);
	
	//default values
	color = "#3366CC";
	paintsize = 5;
	
	if(typeof G_vmlCanvasManager != 'undefined') {
		canvas = G_vmlCanvasManager.initElement(canvas);
	}
	var context = canvas.getContext("2d");
	
	canvas.setAttribute('width', ($(window).width()-25));
	canvas.setAttribute('height', ($(window).height()-25));

	/*context.strokeStyle = "rgb(0, 0, 255)";  
	context.strokeRect(10, 10, 50, 50);  
	context.fillStyle = "rgb(255, 0, 0)";  
	context.fillRect(30, 30, 50, 50);*/
	
	//click, paint = on
	$('#mycanvas').mousedown(function(e) {
	  var mouseX = e.pageX - this.offsetLeft;
	  var mouseY = e.pageY - this.offsetTop;
			
	  paint = true;
	  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, false, color, paintsize);
	  
	  redraw();
	});
	
	//move, keep painting if clicked
	$('#mycanvas').mousemove(function(e){
	  if(paint){
		addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true, color, paintsize);
		redraw();
	  }
	});
	
	//stop painting
	$('#mycanvas').mouseup(function(e){
	  paint = false;
	});
	
	//off limits, stop painting
	$('#mycanvas').mouseleave(function(e){
	  paint = false;
	});
	
	var clickX = new Array();
	var clickY = new Array();
	var clickDrag = new Array();
	var colorXY = new Array();
	var paintSizeXY = new Array();
	var paint;

	function addClick(x, y, dragging, clickedcolor, clickedpaintsize)
	{
	  clickX.push(x);
	  clickY.push(y);
	  clickDrag.push(dragging);
	  colorXY.push(clickedcolor);
	  paintSizeXY.push(clickedpaintsize);
	}
	
	//paint!
	function redraw(){
	
	  canvas.width = canvas.width; // Clears the canvas
	  context.drawImage(background_coloring_img, 80, 10, 250, 250);
	  //context.strokeStyle = color;
	  context.lineJoin = "round";
	  context.lineWidth = paintsize;
				
	  for(var i=0; i < clickX.length; i++)
	  {		
		context.strokeStyle = colorXY[i];
		context.lineWidth = paintSizeXY[i];
		context.beginPath();
		if(clickDrag[i] && i){
		  context.moveTo(clickX[i-1], clickY[i-1]);
		 }else{
		   context.moveTo(clickX[i]-1, clickY[i]);
		 }
		 
		 context.lineTo(clickX[i], clickY[i]);
		 context.closePath();
		 context.stroke();
	  }
	}
	//coloring background
	var background_coloring_images = new Array();
	background_coloring_images.push ('./img/backgrounds/penguin-coloring.gif');
	background_coloring_images.push ('./img/backgrounds/coloring-happytreefriends.gif');
	background_coloring_images.push ('./img/backgrounds/coloring-pedobear.jpg');
	background_coloring_images.push ('./img/backgrounds/coloring_awesomeface.png');
	background_coloring_images.push ('./img/backgrounds/coloring_cartman.jpg');
	background_coloring_images.push ('./img/backgrounds/coloring_nyan.gif');
	background_coloring_images.push ('./img/backgrounds/Sponge-bob-coloring.gif');	
	var background_coloring_img = new Image();
	
	background_coloring_img.src = background_coloring_images[Math.floor(Math.random()*background_coloring_images.length)];
	//alert (background_coloring_img.src);
	background_coloring_img.onload = function() {
		context.drawImage(background_coloring_img, 80, 10, 250, 250);
	}

	
	
	//coloring options
	var paintbuckets_html = '<ul id="paintbuckets"><li id="paint_black" class="paint_optionbox">black</li><li id="paint_blue" class="paint_optionbox">blue</li><li id="paint_yellow" class="paint_optionbox">yellow</li>';
	paintbuckets_html += 	'<li id="paint_green" class="paint_optionbox">green</li><li id="paint_red" class="paint_optionbox">red</li><li id="paint_white" class="paint_optionbox">white</li></ul>';
	paintbuckets_html +=	'<ul id="paintsizes"><li id="paint_small" class="paint_optionbox"><canvas id="paint_small_canvas" width="30" height="30">small</canvas></li>';
	paintbuckets_html +=	'<li id="paint_normal" class="paint_optionbox"><canvas id="paint_normal_canvas" width="30" height="30">normal</canvas></li>';
	paintbuckets_html +=	'<li id="paint_big" class="paint_optionbox"><canvas id="paint_big_canvas" width="30" height="30">big</canvas></li></ul>';
	$("#canvas").before(paintbuckets_html);	

	var ctx = $('#paint_small_canvas')[0].getContext("2d");
	ctx.beginPath();
	ctx.arc(0, 0, 10, 0, 2 * Math.PI, false);
	ctx.lineWidth = 2;
	ctx.stroke();
	
	var ctx = $('#paint_normal_canvas')[0].getContext("2d");
	ctx.beginPath();
	ctx.arc(0, 0, 15, 0, 2 * Math.PI, false);
	ctx.lineWidth = 5;
	ctx.stroke();
	
	var ctx = $('#paint_big_canvas')[0].getContext("2d");
	ctx.beginPath();
	ctx.arc(0, 0, 25, 0, 2 * Math.PI, false);
	//ctx.fillStyle = "black";
	//ctx.fill();
	ctx.lineWidth = 15;
	ctx.stroke();
	
	$('#paint_black').click(function() { color = "#000";});
	$('#paint_blue').click(function() { color = "#3366CC";});
	$('#paint_yellow').click(function() { color = "#fff444";});
	$('#paint_green').click(function() { color = "#01DF01";});
	$('#paint_red').click(function() { color = "#FE2E2E";});
	$('#paint_white').click(function() { color = "#fff";});
	$('#paint_small').click(function() { paintsize = "2"; });
	$('#paint_normal').click(function() { paintsize = "5";});
	$('#paint_big').click(function() { paintsize = "15";});
}