canvas drawing

by Sharan D`Silva

HTML

<div class="paper">
		<canvas id="drawCanvas" style="width:100%; height:100%;border: 1px solid #000"></canvas>
	</div>

CSS

.body{
	background: #eeeeee none repeat scroll 0 0;
}
.paper {
	background: #ffffff none repeat scroll 0 0;
	border: 1px solid #d5d5d5;
	height: 600px;
	border-radius: 5px;
	box-shadow: 0 0 5px #7a7a7a;
	margin: 10px 10px 10px 140px;
}

JavaScript

var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false;
	
	    var x = "black", y = 2;
	    
	    function init() {
	        canvas = document.getElementById('drawCanvas');
	        ctx = canvas.getContext("2d");
	        w = ctx.clientWidth;
	        h = ctx.clientHeight;
	        canvas.addEventListener("mousemove", function (e) {
	            findxy('move', e)
	        }, false);
	        canvas.addEventListener("mousedown", function (e) {
	            findxy('down', e)
	        }, false);
	        canvas.addEventListener("mouseup", function (e) {
	            findxy('up', e)
	        }, false);
	        canvas.addEventListener("mouseout", function (e) {
	            findxy('out', e)
	        }, false);
	    }
	    
	    function color(obj) {
	        switch (obj.id) {
	            case "green":
	                x = "green";
	                break;
	            case "blue":
	                x = "blue";
	                break;
	            case "red":
	                x = "red";
	                break;
	            case "yellow":
	                x = "yellow";
	                break;
	            case "orange":
	                x = "orange";
	                break;
	            case "black":
	                x = "black";
	                break;
	            case "white":
	                x = "white";
	                break;
	        }
	        if (x == "white") y = 14;
	        else y = 2;
	    
	    }
	    
	    function draw() {
	        ctx.beginPath();
	        ctx.moveTo(prevX, prevY);
	        ctx.lineTo(currX, currY);
	        ctx.strokeStyle = x;
	        ctx.lineWidth = y;
	        ctx.stroke();
	        ctx.closePath();
	    }
	    
	    function erase() {
	        var m = confirm("Want to clear");
	        if (m) {
	            ctx.clearRect(0, 0, w, h);
	            document.getElementById("canvasimg").style.display = "none";
	        }
	    }
	    
	    function save() {
	       ...