draw.html

<html>
    <script type="text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "green",
        y = 1;
    
    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
    
        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 erase() {
        ctx.clearRect(0, 0, w, h);
    }
    
    function draw() {
        //if(prevX<=currX){
		if(prevX>currX){
			currX=prevX
			}
			
		ctx.beginPath();
		
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
		
    }
    
    
    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
			
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
			
			
            flag = true;
            dot_flag = true;
			console.log('down >'+prevX +', '+prevY +', '+  currX+', '+currY+ ', '+flag)
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
				console.log('move >'+prevX +', '+prevY +', '+  currX+', '+currY+ ', '+flag)
                draw();
            }
        }
    }
    </script>
    <body onload="init()">
        <canvas id="can" width="1350" height="600" style="position:absolute;/* top:10%; *//* left:10%; */border:2px solid;"></canvas>
        <!-- <div style="position:absolute;top:12%;left:43%;">Choose Color</div> -->
        <!-- <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div> -->
        <!-- <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div> -->
        <!-- <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div> -->
        <!-- <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div> -->
        <!-- <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div> -->
        <!-- <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div> -->
        <!-- <div style="position:absolute;top:20%;left:43%;">Eraser</div> -->
        <!-- <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div> -->
         <!-- <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;"> -->
        <!-- <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;"> -->
        <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top: 95%;left: auto;right: auto;">
    </body>
    </html>