Paint, 1-canvas

HTML

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="colorCSS2.css">
</head>
<body>
<div id="container">
	<div id="sketch">
		<canvas id="paint" width="600px" height="600px"></canvas>
	</div>
	<div id="color">
		<form id="colorChoice">
			<input id="brushBlue" type="button" name="color" value="blue" onclick="blue()" />
			<input type="button" name="color" value="red">
		</form>
	</div>
</div>
<script src="color2.js"></script>
</body>
</html>

CSS

body {
	width:600px;
	margin:0 auto;
	padding:0px;
	background-color:gray;
	}
#container {
	margin-top:50px;
	height:800px;
	display:block
	float:left;
	background-color:white;
	}
#color {
	display:block;
	}
#colorChoice {
	width:150px;
	margin:0 auto;
	}
input {
	margin-left:20px;
	}

JavaScript

(function() {
    var canvas = document.getElementById('paint');
    var ctx = canvas.getContext('2d');
	var imageObj = new Image();
	
	/* Loading the Image*/
	imageObj.onload = function() {
        ctx.drawImage(imageObj, 0, 0);
		/* Setting the paint to be Underneath the Drawing */
		ctx.globalCompositeOperation="destination-over";
		};
	  


    var mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};

    /* Mouse Capturing Work */
    canvas.addEventListener('mousemove', function(e) {
        last_mouse.x = mouse.x;
        last_mouse.y = mouse.y;

        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
    }, false);

	var brushColor = 'yellow';
	
     document.getElementById('brushBlue').onclick = function () {
     brushColor = 'blue';
     ctx.strokeStyle = brushColor;
    };

    /* Drawing on Paint App */
    ctx.lineWidth = 20;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
	ctx.strokeStyle = brushColor;

	canvas.addEventListener('mousedown', function(e) {
        canvas.addEventListener('mousemove', onPaint, false);
    }, false);

    canvas.addEventListener('mouseup', function() {
        canvas.removeEventListener('mousemove', onPaint, false);
    }, false);

    var onPaint = function() {
        ctx.beginPath();
        ctx.moveTo(last_mouse.x, last_mouse.y);
        ctx.lineTo(mouse.x, mouse.y);
        ctx.closePath();
        ctx.stroke();
		

    };

}());