Paint, 1-canvas

HTML

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="colorCSS2.css">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    	<script>
    		$(document).bind ("mobileinit", function ()
    		{
        	// alert ("mobileinit");
    		});
  	</script>  
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        
</head>
<body>
<div id="container" data-role="page">
	<div id="sketch" data-role="content">
		<canvas id="paint" style="z-index: 0; position:absolute;" height="600px" width="600px"></canvas> 
		<canvas id="layer2" style="z-index: 1; position:absolute;" height="600px" width="600px"></canvas> 
	</div>
	<div id="color">
		<form id="colorChoice">
			<input id="brushBlue" type="button" name="color" value="blue" />
			<input id="brushRed" type="button" name="color" value="red" />
			<input id="brushYellow" type="button" name="color" value="yellow" /><br>
			<input id="erase" type="button" name="erase" value="erase" /><br>
			<input id="brushSm" type="button" name="size" value="sm" />
			<input id="brushMd" type="button" name="size" value="md" />
			<input id="brushLg" type="button" name="size" value="lg" /><br>
			<input id="clear" type="button" name="clear" value="clear canvas" /><br>
		</form>
	</div>
	
</div>
<script src="color2.js"></script>
</body>
</html>

CSS

body {
	width:600px;
	padding:0px;
	background-color:white;
	margin:0px auto;
	}
#container {
	height:800px;
	display:block
	float:left;
	background-color:white;
	position:relative;
	cursor:pointer;
	}
#color {
	display:block;
	position:absolute;
	left:225px;
	top:625px;
	}
#colorChoice {
	width:150px;
	}
#erase, #clear {
	width: 140px;
	}
#brushSm, #brushMd, #brushLg {
	width: 44px;
	}
#sketch {
	}
input {
	margin-left:0px;
	}
#paint {
	border: 10px solid black;
	}

JavaScript

document.getElementById( "container" ).onmousedown = function(event){
    event.preventDefault();
	}
	
	var layer2 = document.getElementById("layer2");
	var ctx2 = layer2.getContext("2d");
	var imageObj = new Image();
	/* Loading the Image*/
	imageObj.onload = function() {
        ctx2.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'https://lh5.googleusercontent.com/-P5ucC3TjCLU/UjHE0rENTaI/AAAAAAAAAts/mH2A_OORkQY/s800/color.png';
	

(function() {
    var canvas = document.getElementById('paint');
    var ctx = canvas.getContext('2d');
	var imageObj = new Image();
	
	var cont = document.getElementById('container');
    var mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};

    /* Mouse Capturing Work */
    
    $('#container').on('vmousemove', function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

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

	/* Default Color */
	var brushColor = 'black';
	
	/* Color Change */
     document.getElementById('brushBlue').onclick = function () {
     brushColor = 'blue';
     ctx.strokeStyle = brushColor;
    };
	
	 document.getElementById('brushRed').onclick = function () {
     brushColor = 'red';
     ctx.strokeStyle = brushColor;
    };
	
	 document.getElementById('brushYellow').onclick = function () {
     brushColor = 'yellow';
     ctx.strokeStyle = brushColor;
    };
	
	/* Erase */
	document.getElementById('erase').onclick = function () {
     brushColor = 'white';
     ctx.strokeStyle = brushColor;
    };
	
	/* Brush Size */
    document.getElementById('brushSm').onclick = function () {
    ctx.lineWidth = 5;
    };
	
	document.getElementById('brushMd').onclick = function () {
    ctx.lineWidth = 30;
    };
	
	document.getElementById('brushLg').onclick = function () {
    ctx.lineWidth = 60;
    };

	document.getElementById('clear').onclick = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    };
	
	
    /* Drawing on...