update

alanknguyen314 · Jun 18, 2022 · b57ba11 · b57ba11
1 parent bfbd0e6
commit b57ba11
Show file tree

Hide file tree

Showing 9 changed files with 411 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/HTMLPaint/HTMLPaint.html b/HTMLPaint/HTMLPaint.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+
+<html>
+    <head>
+        <script src="PaintJS.js"></script> 
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <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>
+	    <div>
+	        <button onclick='clearCanvas()'>Clear</button>
+	    </div>
+    </body>
+</html>
diff --git a/HTMLPaint/PaintJS.j b/HTMLPaint/PaintJS.j
@@ -0,0 +1,176 @@
+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;
+}
+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 };
+	}
+}
diff --git a/HTMLPaint/PaintJS.js b/HTMLPaint/PaintJS.js
@@ -0,0 +1,176 @@
+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;
+}
+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 };
+	}
+}