Created initial canvas app. Draws and erases pixels with color picker

5 years ago · 8d1614dcb0
parent 59d48fc39c
commit 8d1614dcb0
5 changed files with 134 additions and 0 deletions
--- a/canvas.js
+++ b/canvas.js
@ -0,0 +1,81 @@
+var mouseState = -1;
+var selectedColor = "black";
+var selectedColorBorder = "2px red solid";
+var unselectedColorBorder = "2px black solid";
+
+document.addEventListener("DOMContentLoaded",()=>{
+	var canvas = document.getElementsByClassName("canvas")[0];
+	var MouseListener = (e)=>{
+		e.preventDefault();
+		if (mouseState>=0) {
+			if (mouseState<2 && e.target.tagName==="TH") {
+				e.target.style.background=selectedColor;
+			} else {
+				e.target.style.background="white";
+			}
+		}
+	}
+	var MouseClickListener = (e)=>{
+		e.preventDefault();
+	}
+	var MouseStateUp = (e)=>{
+		e.preventDefault();
+		mouseState = -1;
+	}
+	var MouseStateDown = (e)=>{
+		e.preventDefault();
+		mouseState = e.button;
+		if (e.target.tagName==="TH") {
+			if (e.button===0) {
+				e.target.style.background=selectedColor;
+			} else {
+				e.target.style.background="white";
+			}
+		}
+	}
+	
+	var generateTable = (columns,rows)=>{
+		var table = document.createElement("table");
+		for (var i=0;i<rows;i++) {
+			var row = document.createElement("tr");
+			for (var j=0;j<columns;j++) {
+				var col = document.createElement("th");
+				row.appendChild(col);
+			}
+			table.appendChild(row);
+		}
+		
+		table.addEventListener("click",MouseClickListener);
+		table.addEventListener("mouseover",MouseListener);
+		table.addEventListener("mouseup",MouseStateUp);
+		table.addEventListener("mousedown",MouseStateDown);
+		
+		canvas.appendChild(table);
+	}
+	
+	var generateColors = (simple)=>{
+		for (var i=0;i<CSS_COLOR_NAMES.length;i++) {
+			var dot = document.createElement("span")
+			dot.classList.add("dot")
+			if (CSS_COLOR_NAMES[i]===selectedColor) {
+				dot.style.border=selectedColorBorder;
+			}
+			dot.style.background=CSS_COLOR_NAMES[i];
+			dot.addEventListener("mousedown",(e)=>{
+				e.preventDefault();
+				var otherDots = document.getElementsByClassName("dot");
+				for (var i=0;i<otherDots.length;i++) {
+					var dot = otherDots[i];
+					dot.style.border=unselectedColorBorder;
+				}
+				e.target.style.border=selectedColorBorder;
+				selectedColor = e.target.style.background;
+			})
+			canvas.appendChild(dot);
+		}		
+	}
+	
+	generateTable(20,20);
+	canvas.appendChild(document.createElement("br"))
+	generateColors(false);
+})
--- a/colorList.js
+++ b/colorList.js
@ -0,0 +1,18 @@
+const CSS_COLOR_NAMES = [
+  "black",
+  "silver",
+  "gray",
+  "white",
+  "maroon",
+  "red",
+  "purple",
+  "fuchsia",
+  "green",
+  "lime",
+  "olive",
+  "yellow",
+  "navy",
+  "blue",
+  "teal",
+  "aqua"
+];
--- a/colorwheel.png
+++ b/colorwheel.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<link rel="stylesheet" href="style.css">
+		<script src="colorList.js"></script>
+		<script src="canvas.js"></script>
+	</head>
+	
+	<body>
+		<div class="canvas">
+		
+		</div>
+	</body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,20 @@
+table,td,th{
+	border:1px gray dashed;
+	border-spacing:0px;
+	gap:0px;
+}
+th{
+	min-width:16px;
+	min-height:16px;
+	width:16px;
+	height:16px;
+}
+.dot{
+	height: 25px;
+	width: 25px;
+	background-color: #bbb;
+	border-radius: 50%;
+	display: inline-block;
+	border:2px black solid;
+	margin-left:1px;
+}