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;
 }