johnifegwu/Draw_signature.html

## Draw_signature.html
<!-- Created by John Ifegwu-->

<!DOCTYPE HTML>
<html>
<header>
    <style>
        /* Created by John Ifegwu */

#canvas
{
    border: 1px solid black;
    margin: 10px 0 10px 0;
    cursor: pointer;
}
#colors button
{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-top: 0px;
}
#black
{
    background: black;
}
#pink
{
    background: pink;
}
#red
{
    background: red;
}
#green
{
    background: green;
}
#blue
{
    background: blue;
}
#orange
{
    background: orange;
}

    </style>
    <script>

        // Created by John Ifegwu

var arr_touches = [];
var canvas;
var ctx;
var down = false; //mouse is pressed
var color = 'black'; //default drawing color
var width = 5; // drawing width


//calling window.onload to make sure the HTML is loaded
window.onload = function() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    ctx.lineWidth = width;

    //handling mouse click and move events
    canvas.addEventListener('mousemove', handleMove);
    canvas.addEventListener('mousedown', handleDown);
    canvas.addEventListener('mouseup', handleUp);

    //handling mobile touch events
    canvas.addEventListener("touchstart", handleStart, false);
    canvas.addEventListener("touchend", handleEnd, false);
    canvas.addEventListener("touchcancel", handleCancel, false);
    canvas.addEventListener("touchleave", handleEnd, false);
    canvas.addEventListener("touchmove", handleTouchMove, false);
};

function handleMove(e)
{
    xPos = e.clientX-canvas.offsetLeft;
    yPos = e.clientY-canvas.offsetTop;
    if(down == true)
    {
        ctx.lineTo(xPos,yPos); //create a line from old point to new one
        ctx.strokeStyle = color;
        ctx.stroke();
    }
}

function handleDown()
{
    down = true;
    ctx.beginPath();
    ctx.moveTo(xPos, yPos);
}

function handleUp()
{
    down = false;
}

function handleStart(evt)
{
    var touches = evt.changedTouches;
    for(var i = 0; i < touches.length; i++)
    {
        if(isValidTouch(touches[i]))
        {
            evt.preventDefault();
            arr_touches.push(copyTouch(touches[i]));
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.fill();
        }
    }
}

function handleTouchMove(evt)
{
    var touches = evt.changedTouches;
    var offset = findPos(canvas);
    for (var i = 0; i < touches.length; i++)
    {
        if(isValidTouch(touches[i]))
        {
            evt.preventDefault();
            var idx = ongoingTouchIndexById(touches[i].identifier);
            if (idx >= 0)
            {
                ctx.beginPath();
                ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
                ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
                ctx.strokeStyle = color;
                ctx.stroke();

                arr_touches.splice(idx, 1, copyTouch(touches[i]));
            }
        }
    }
}

function handleEnd(evt)
{
    var touches = evt.changedTouches;
    var offset = findPos(canvas);
    for (var i = 0; i < touches.length; i++)
    {
        if(isValidTouch(touches[i]))
        {
            evt.preventDefault();
            var idx = ongoingTouchIndexById(touches[i].identifier);
            if (idx >= 0)
            {
                ctx.lineWidth = 4;
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
                ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
               arr_touches.splice(i, 1);
            }
        }
    }
}

function handleCancel(evt)
{
    evt.preventDefault();
    var touches = evt.changedTouches;

    for (var i = 0; i < touches.length; i++) {
        arr_touches.splice(i, 1);
    }
}

function copyTouch(touch)
{
    return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY};
}

function ongoingTouchIndexById(idToFind)
{
    for (var i = 0; i < arr_touches.length; i++) {
        var id = arr_touches[i].identifier;
        if (id == idToFind) {
            return i;
        }
    }
    return -1;
}

function changeColor(new_color)
{
    color = new_color;
    saveImg();
}

function clearCanvas()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function isValidTouch(touch)
{
    var curleft = 0, curtop = 0;
    var offset = 0;

    if (canvas.offsetParent) {
        do {
            curleft += canvas.offsetLeft;
            curtop += canvas.offsetTop;
        } while (touch == canvas.offsetParent);

        offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
    }

    if(touch.clientX-offset.x > 0 &&
            touch.clientX-offset.x < parseFloat(canvas.width) &&
                touch.clientY-offset.y >0 &&
                    touch.clientY-offset.y < parseFloat(canvas.height)) {
        return true;
    }
    else
    {
        return false;
    }
}

function findPos(obj)
{
    var curleft = 0, curtop = 0;
    if (obj.offsetParent)
    {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj == obj.offsetParent);

        return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
    }
}

function saveImg()
{
    //save canvas image as data url (pgn by default)
    var dataUrl = canvas.toDataURL();

    //set canvas image src to dataUrl
    //so that it can be saved as image
    document.getElementById("canvasImg").src = dataUrl

}


    </script>

</header>
    <body>
        <div id='colors'>
            <button id='black' onclick='changeColor("black")' ontouchstart='changeColor("black")'></button>
            <button id='red' onclick='changeColor("red")' ontouchstart='changeColor("red")'></button>
            <button id='green' onclick='changeColor("green")' ontouchstart='changeColor("green")'></button>
            <button id='blue' onclick='changeColor("blue")' ontouchstart='changeColor("blue")'></button>
            <button id='orange' onclick='changeColor("orange")' ontouchstart='changeColor("orange")'></button>
            <button id='pink' onclick='changeColor("pink")' ontouchstart='changeColor("pink")'></button>
        </div>
        <canvas id='canvas' width='300' height='200'></canvas>
<img id="canvasImg" alt="Right click to save!">
        <div>
            <button onclick='clearCanvas()'>Clear</button>
            <button onclick='saveImg()'>Save</button>
        </div>
    </body>
</html>
	<!-- Created by John Ifegwu-->

	<!DOCTYPE HTML>
	<html>
	<header>
	<style>
	/* Created by John Ifegwu */

	#canvas
	{
	border: 1px solid black;
	margin: 10px 0 10px 0;
	cursor: pointer;
	}
	#colors button
	{
	width: 40px;
	height: 40px;
	border-radius: 100%;
	margin-top: 0px;
	}
	#black
	{
	background: black;
	}
	#pink
	{
	background: pink;
	}
	#red
	{
	background: red;
	}
	#green
	{
	background: green;
	}
	#blue
	{
	background: blue;
	}
	#orange
	{
	background: orange;
	}

	</style>
	<script>

	// Created by John Ifegwu

	var arr_touches = [];
	var canvas;
	var ctx;
	var down = false; //mouse is pressed
	var color = 'black'; //default drawing color
	var width = 5; // drawing width


	//calling window.onload to make sure the HTML is loaded
	window.onload = function() {
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	ctx.lineWidth = width;

	//handling mouse click and move events
	canvas.addEventListener('mousemove', handleMove);
	canvas.addEventListener('mousedown', handleDown);
	canvas.addEventListener('mouseup', handleUp);

	//handling mobile touch events
	canvas.addEventListener("touchstart", handleStart, false);
	canvas.addEventListener("touchend", handleEnd, false);
	canvas.addEventListener("touchcancel", handleCancel, false);
	canvas.addEventListener("touchleave", handleEnd, false);
	canvas.addEventListener("touchmove", handleTouchMove, false);
	};

	function handleMove(e)
	{
	xPos = e.clientX-canvas.offsetLeft;
	yPos = e.clientY-canvas.offsetTop;
	if(down == true)
	{
	ctx.lineTo(xPos,yPos); //create a line from old point to new one
	ctx.strokeStyle = color;
	ctx.stroke();
	}
	}

	function handleDown()
	{
	down = true;
	ctx.beginPath();
	ctx.moveTo(xPos, yPos);
	}

	function handleUp()
	{
	down = false;
	}

	function handleStart(evt)
	{
	var touches = evt.changedTouches;
	for(var i = 0; i < touches.length; i++)
	{
	if(isValidTouch(touches[i]))
	{
	evt.preventDefault();
	arr_touches.push(copyTouch(touches[i]));
	ctx.beginPath();
	ctx.fillStyle = color;
	ctx.fill();
	}
	}
	}

	function handleTouchMove(evt)
	{
	var touches = evt.changedTouches;
	var offset = findPos(canvas);
	for (var i = 0; i < touches.length; i++)
	{
	if(isValidTouch(touches[i]))
	{
	evt.preventDefault();
	var idx = ongoingTouchIndexById(touches[i].identifier);
	if (idx >= 0)
	{
	ctx.beginPath();
	ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
	ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
	ctx.strokeStyle = color;
	ctx.stroke();

	arr_touches.splice(idx, 1, copyTouch(touches[i]));
	}
	}
	}
	}

	function handleEnd(evt)
	{
	var touches = evt.changedTouches;
	var offset = findPos(canvas);
	for (var i = 0; i < touches.length; i++)
	{
	if(isValidTouch(touches[i]))
	{
	evt.preventDefault();
	var idx = ongoingTouchIndexById(touches[i].identifier);
	if (idx >= 0)
	{
	ctx.lineWidth = 4;
	ctx.fillStyle = color;
	ctx.beginPath();
	ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
	ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
	arr_touches.splice(i, 1);
	}
	}
	}
	}

	function handleCancel(evt)
	{
	evt.preventDefault();
	var touches = evt.changedTouches;

	for (var i = 0; i < touches.length; i++) {
	arr_touches.splice(i, 1);
	}
	}

	function copyTouch(touch)
	{
	return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY};
	}

	function ongoingTouchIndexById(idToFind)
	{
	for (var i = 0; i < arr_touches.length; i++) {
	var id = arr_touches[i].identifier;
	if (id == idToFind) {
	return i;
	}
	}
	return -1;
	}

	function changeColor(new_color)
	{
	color = new_color;
	saveImg();
	}

	function clearCanvas()
	{
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	}

	function isValidTouch(touch)
	{
	var curleft = 0, curtop = 0;
	var offset = 0;

	if (canvas.offsetParent) {
	do {
	curleft += canvas.offsetLeft;
	curtop += canvas.offsetTop;
	} while (touch == canvas.offsetParent);

	offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
	}

	if(touch.clientX-offset.x > 0 &&
	touch.clientX-offset.x < parseFloat(canvas.width) &&
	touch.clientY-offset.y >0 &&
	touch.clientY-offset.y < parseFloat(canvas.height)) {
	return true;
	}
	else
	{
	return false;
	}
	}

	function findPos(obj)
	{
	var curleft = 0, curtop = 0;
	if (obj.offsetParent)
	{
	do {
	curleft += obj.offsetLeft;
	curtop += obj.offsetTop;
	} while (obj == obj.offsetParent);

	return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
	}
	}

	function saveImg()
	{
	//save canvas image as data url (pgn by default)
	var dataUrl = canvas.toDataURL();

	//set canvas image src to dataUrl
	//so that it can be saved as image
	document.getElementById("canvasImg").src = dataUrl

	}



	</script>

	</header>
	<body>
	<div id='colors'>
	<button id='black' onclick='changeColor("black")' ontouchstart='changeColor("black")'></button>
	<button id='red' onclick='changeColor("red")' ontouchstart='changeColor("red")'></button>
	<button id='green' onclick='changeColor("green")' ontouchstart='changeColor("green")'></button>
	<button id='blue' onclick='changeColor("blue")' ontouchstart='changeColor("blue")'></button>
	<button id='orange' onclick='changeColor("orange")' ontouchstart='changeColor("orange")'></button>
	<button id='pink' onclick='changeColor("pink")' ontouchstart='changeColor("pink")'></button>
	</div>
	<canvas id='canvas' width='300' height='200'></canvas>
	<img id="canvasImg" alt="Right click to save!">
	<div>
	<button onclick='clearCanvas()'>Clear</button>
	<button onclick='saveImg()'>Save</button>
	</div>
	</body>
	</html>