Add resources to readme

README.md

@@ -43,6 +43,15 @@ Research [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Storage
 
 Create a fill tool that will [flood fill](https://en.wikipedia.org/wiki/Flood_fill) boundaries with a chosen paint color. 
 
+### Bonus 5
+
+Load a PNG file directly onto the canvas using these resources:
+
+- [FileReader.readAsDataUrl](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)
+- [Canvas.drawImage](https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
+- [Image.onload](https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
+- [FileReader example](https://stackoverflow.com/questions/3146483/html5-file-api-read-as-text-and-binary?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
+- [Get pixel color from Canvas](https://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
 
 ### Deployment
 

canvas.js

@@ -1,844 +0,0 @@
-var mouseState = -1;
-var selectedColor = "black";
-var selectedColorBorder = "2px red solid";
-var unselectedColorBorder = "2px black solid";
-var ROWS = 30;
-var COLS = 30;
-var customColorToolbar=false;
-var fillTool = false;
-
-var changedPixels = {}; //pixel data for all changed pixels in this step.
-/*
-STEPTYPE: 
-ADD //Pixel was added. Remove all pixels in this object.
-	//Each pixel will have an old_pos_X_Y indicating their old color. Do the reverse to undo. The pixel list itself will be in "PIXELS": X,Y,X2,Y2,X3,Y3, etc.
-FILL //Fill was done. A color is provided by "backcolor" and a pixel containing the click and source color. To undo it, fill with the backcolor instead of the source color.
-RESIZE //A resize operation was done. All old removed pixels are stored for shrinks. No pixels are stored for expansions.
-*/
-
-var pixelStates = []; //Last 20 pixel states stored here.
-var currentPixelState = -1; //Which pixel state we're on. Max out at 20.
-
-var lastDrawPoint = null;
-
-document.addEventListener("DOMContentLoaded",()=>{
-	var undoButton = document.createElement("button")
-	var redoButton = document.createElement("button")
-	var rowsControl = document.createElement("input")
-	var colsControl = document.createElement("input")
-	
-	class Coordinate{
-		constructor(box) {
-			var idParse=box.id.split("_");
-			this.x = idParse[1];
-			this.y = idParse[2];
-		}
-	}
-	class PixelCoordinate extends Coordinate{
-		constructor(x,y) {
-			this.x = x;
-			this.y = y;
-		}
-	}
-	class Point{
-		constructor(x,y) {
-			this.x = x;
-			this.y = y;
-		}
-	}
-	
-	//Returns a coordinate class.
-	var getCoordinates = (box)=>{
-		return new Coordinate(box);
-	}
-	
-	function insertAfter(newNode, existingNode) {
-    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
-	}
-	function componentToHex(c) {
-	  var hex = c.toString(16);
-	  return hex.length == 1 ? "0" + hex : hex;
-	}
-	function rgbToHex(rgbvalue) {
-		var rawColors = rgbvalue.replace("rgb(","").replace(")","").split(",");
-	  return "#" + componentToHex(Number(rawColors[0])) + componentToHex(Number(rawColors[1])) + componentToHex(Number(rawColors[2]));
-	}
-	
-	function Undo() {
-		//Execute the reverse.
-		var state = pixelStates[--currentPixelState];
-		//console.log("Undo "+currentPixelState)
-		//console.log("Undo "+JSON.stringify(state))
-		switch (state["STEPTYPE"]) {
-			case "ADD":{
-				//Take each pixel and color it its previous color.
-				var pixels = state["PIXELS"].split(",")
-				for (var i=0;i<pixels.length;i+=2) {
-					var pixelX = pixels[i];
-					var pixelY = pixels[i+1];
-					var oldColor = state["old_pos_"+pixelX+"_"+pixelY]
-					var cell = document.getElementById("pos_"+pixelX+"_"+pixelY)
-					cell.style.background = oldColor;
-				}
-			}break;
-			case "FILL":{
-				floodFill(state["PIXELX"],state["PIXELY"],document.getElementById("pos_"+state["PIXELX"]+"_"+state["PIXELY"]).style.background,state["backcolor"])
-			}break;
-			case "RESIZEROWS":{
-				//If the old size was smaller, restore the data in PIXELS.
-				//If the old size was larger, just remove rows.
-				//Make sure to update the control.
-				var table = document.getElementsByTagName("table")[0];
-				rowsControl.value = state["oldsize"]
-				if (state["newsize"]>state["oldsize"]) {
-					while (table.getElementsByTagName("tr").length>rowsControl.value) {
-						var lastrow = table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1]
-						lastrow.remove();
-					}
-				} else {
-					//We have to add back in rows. As we do, restore the cell data for them.
-					var newcells = 0;
-					while (table.getElementsByTagName("tr").length<rowsControl.value) {
-						//CREATE X amount of new rows.
-						var newrow = document.createElement("tr");
-						for (var i=0;i<COLS;i++){
-							var col = document.createElement("th");
-							col.style.border=document.querySelector("table").style.border;
-							col.id="pos_"+i+"_"+(Number(ROWS)+Number(newcells));
-							col.style.background=state[col.id];
-							newrow.appendChild(col);
-						}
-						newcells++;
-						table.appendChild(newrow);
-					}
-				}
-				ROWS = rowsControl.value;
-			}break;
-			case "RESIZECOLS":{
-				//If the old size was smaller, restore the data in PIXELS.
-				//If the old size was larger, just remove cols.
-				//Make sure to update the control.
-				var table = document.getElementsByTagName("table")[0];
-				colsControl.value = state["oldsize"]
-				if (state["newsize"]>state["oldsize"]) {
-					while (colsControl.value<COLS) {
-						for (var i=0;i<table.getElementsByTagName("tr").length;i++) {
-							var row = table.getElementsByTagName("tr")[i];
-							var col = row.getElementsByTagName("th")[row.getElementsByTagName("th").length-1]
-							var coords = getCoordinates(col)
-							col.remove();
-						}
-						COLS--;
-					}
-				} else {
-					//We have to add back in cols. As we do, restore the cell data for them.
-					while (colsControl.value>COLS) {
-						for (var i=0;i<table.getElementsByTagName("tr").length;i++) {
-							var row = table.getElementsByTagName("tr")[i]
-							var col = document.createElement("th");
-							col.id="pos_"+COLS+"_"+i;
-							col.style.background=state[col.id];
-							col.style.border=document.querySelector("table").style.border;
-							row.appendChild(col);
-						}
-						COLS++;
-					}
-				}
-				COLS = colsControl.value;
-			}break;
-		}
-		redoButton.disabled = false;
-		undoButton.disabled = true;
-		if (currentPixelState>0) {
-			//currentPixelState--;
-			undoButton.disabled = false;
-		}
-	}
-	
-	function Redo() {
-		//Execute the re-reverse.
-		//console.log("Redo "+currentPixelState)
-		var state = pixelStates[currentPixelState++];
-		//console.log("Redo "+JSON.stringify(state))
-		switch (state["STEPTYPE"]) {
-			case "ADD":{
-				//Take each pixel and color it its previous color.
-				var pixels = state["PIXELS"].split(",")
-				for (var i=0;i<pixels.length;i+=2) {
-					var pixelX = pixels[i];
-					var pixelY = pixels[i+1];
-					var newColor = state["pos_"+pixelX+"_"+pixelY]
-					var cell = document.getElementById("pos_"+pixelX+"_"+pixelY)
-					cell.style.background = newColor;
-				}
-			}break;
-			case "FILL":{
-				floodFill(state["PIXELX"],state["PIXELY"],document.getElementById("pos_"+state["PIXELX"]+"_"+state["PIXELY"]).style.background,state["newcolor"])
-			}break;
-			case "RESIZEROWS":{
-				//If the old size was smaller, restore the data in PIXELS.
-				//If the old size was larger, just remove rows.
-				//Make sure to update the control.
-				var table = document.getElementsByTagName("table")[0];
-				rowsControl.value = state["newsize"]
-				if (state["newsize"]<state["oldsize"]) {
-					while (table.getElementsByTagName("tr").length>rowsControl.value) {
-						var lastrow = table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1]
-						lastrow.remove();
-					}
-				} else {
-					//We have to add back in rows. As we do, restore the cell data for them.
-					var newcells = 0;
-					while (table.getElementsByTagName("tr").length<rowsControl.value) {
-						//CREATE X amount of new rows.
-						var newrow = document.createElement("tr");
-						for (var i=0;i<COLS;i++){
-							var col = document.createElement("th");
-							col.style.border=document.querySelector("table").style.border;
-							col.id="pos_"+i+"_"+(Number(ROWS)+Number(newcells));
-							col.style.background="white";
-							newrow.appendChild(col);
-						}
-						newcells++;
-						table.appendChild(newrow);
-					}
-				}
-				ROWS = rowsControl.value;
-			}break;
-			case "RESIZECOLS":{
-				//If the old size was smaller, restore the data in PIXELS.
-				//If the old size was larger, just remove rows.
-				//Make sure to update the control.
-				var table = document.getElementsByTagName("table")[0];
-				colsControl.value = state["newsize"]
-				if (state["newsize"]<state["oldsize"]) {
-					while (colsControl.value<COLS) {
-						for (var i=0;i<table.getElementsByTagName("tr").length;i++) {
-							var row = table.getElementsByTagName("tr")[i];
-							var col = row.getElementsByTagName("th")[row.getElementsByTagName("th").length-1]
-							var coords = getCoordinates(col)
-							col.remove();
-						}
-						COLS--;
-					}
-				} else {
-					//We have to add back in cols. As we do, fill in white for them.
-					var newcells = 0;
-					while (colsControl.value>COLS) {
-						for (var i=0;i<table.getElementsByTagName("tr").length;i++) {
-							var row = table.getElementsByTagName("tr")[i]
-							var col = document.createElement("th");
-							col.id="pos_"+COLS+"_"+i;
-							col.style.background="white";
-							col.style.border=document.querySelector("table").style.border;
-							row.appendChild(col);
-						}
-						COLS++;
-					}
-				}
-				COLS = colsControl.value;
-			}break;
-		}
-		redoButton.disabled = true;
-		undoButton.disabled = false;
-		if (currentPixelState<pixelStates.length) {
-			redoButton.disabled = false;
-		}
-	}
-	
-	var canvas = document.getElementsByClassName("canvas")[0];
-	var toolbar = document.getElementsByClassName("toolbar")[0];
-	
-	
-
-	document.addEventListener("mousemove",(e)=>{
-		if (toolbar.style.visibility === "hidden" &&
-		e.target.tagName[0]!== "T" &&
-		e.target.tagName[0]!== "D") {
-			toolbar.style.visibility = "visible";
-			mouseState = -1;
-		}
-	})
-	
-	var MouseListener = (e)=>{
-		e.preventDefault();
-		if (!fillTool) {
-			if (e.target.tagName==="TH") {
-				if (mouseState>=0) {
-					var mycoords = getCoordinates(e.target)
-					if (lastDrawPoint===null) {
-						lastDrawPoint = new Point(mycoords.x,mycoords.y);
-						if (!(e.target.id in changedPixels)) {
-							if ("PIXELS" in changedPixels) {
-								changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y
-							} else {
-								changedPixels["PIXELS"]=mycoords.x+","+mycoords.y
-							}
-							changedPixels["old_"+e.target.id]=e.target.style.background;
-							if (mouseState<2) {
-								e.target.style.background=selectedColor;
-								changedPixels[e.target.id]=selectedColor;
-							} else {
-								e.target.style.background="white";
-								changedPixels[e.target.id]="white";
-							}
-							changedPixels["STEPTYPE"]="ADD"
-						}
-					} else {
-						//SMOOTH DRAWING
-						//Draw pixels for each point in
-						//between both positions. That
-						//way there's no skipped points.
-						var slopeX = mycoords.x - lastDrawPoint.x
-						var slopeY = mycoords.y - lastDrawPoint.y
-						//Whichever is larger is the one
-						//we increment by 1 pixel each turn.
-						if (Math.abs(slopeY)>Math.abs(slopeX)) {
-							//Y increases by 1.
-							var Xincr = slopeX/Math.abs(slopeY);
-							var Yincr = Math.sign(slopeY)*1;
-							var currX = Number(lastDrawPoint.x)
-							var currY = Number(lastDrawPoint.y)
-							while (Math.floor(currY)!==Math.floor(mycoords.y)) {
-								currY+=Yincr;
-								currX+=Xincr;
-								var target = document.getElementById("pos_"+Math.ceil(currX)+"_"+currY);
-								if (!(target.id in changedPixels)) {
-									if ("PIXELS" in changedPixels) {
-										changedPixels["PIXELS"]+=","+Math.ceil(currX)+","+currY
-									} else {
-										changedPixels["PIXELS"]=Math.ceil(currX)+","+currY
-									}
-									changedPixels["old_"+target.id]=target.style.background;
-									if (mouseState<2) {
-										target.style.background=selectedColor;
-										changedPixels[target.id]=selectedColor;
-									} else {
-										target.style.background="white";
-										changedPixels[target.id]="white";
-									}
-									changedPixels["STEPTYPE"]="ADD"
-								}
-								if (currX>COLS || currY>ROWS || currX<0 || currY<0) {
-									new Error("Rip")
-									break;
-								}
-							}
-						} else {
-							var Xincr = Math.sign(slopeX)*1;
-							var Yincr = slopeY/Math.abs(slopeX);
-							var currX = Number(lastDrawPoint.x)
-							var currY = Number(lastDrawPoint.y)
-							while (Math.floor(currX)!==Math.floor(mycoords.x)) {
-								currY+=Yincr;
-								currX+=Xincr;
-								var target = document.getElementById("pos_"+currX+"_"+Math.ceil(currY));
-								if (!(target.id in changedPixels)) {
-									if ("PIXELS" in changedPixels) {
-										changedPixels["PIXELS"]+=","+currX+","+Math.ceil(currY)
-									} else {
-										changedPixels["PIXELS"]=currX+","+Math.ceil(currY)
-									}
-									changedPixels["old_"+target.id]=target.style.background;
-									if (mouseState<2) {
-										target.style.background=selectedColor;
-										changedPixels[target.id]=selectedColor;
-									} else {
-										target.style.background="white";
-										changedPixels[target.id]="white";
-									}
-									changedPixels["STEPTYPE"]="ADD"
-								}
-								if (currX>COLS || currY>ROWS || currX<0 || currY<0) {
-									new Error("Rip")
-									break;
-								}
-							}
-						}
-						lastDrawPoint = new Point(mycoords.x,mycoords.y);
-					}
-				}
-			}
-		}
-	}
-	var MouseClickListener = (e)=>{
-		e.preventDefault();
-	}
-	var MouseStateUp = (e)=>{
-		e.preventDefault();
-		mouseState = -1;
-		if (fillTool) {
-			if (e.target.tagName==="TH") {
-				var coords = getCoordinates(e.target)
-				floodFill(coords.x,coords.y,e.target.style.background,selectedColor)
-				/*changedPixels["STEPTYPE"]="FILL"
-				changedPixels["backcolor"]=e.target.style.background
-				changedPixels["newcolor"]=selectedColor
-				changedPixels["PIXELX"]=coords.x
-				changedPixels["PIXELY"]=coords.y*/
-			}
-		}
-		toolbar.style.visibility = "visible";
-		//console.log(changedPixels);
-		AddStoredPixelStep();
-	}
-	var MouseStateDown = (e)=>{
-		e.preventDefault();
-		mouseState = e.button;
-		lastDrawPoint = null;
-		if (!fillTool) {
-			if (e.target.tagName==="TH") {
-				var mycoords = getCoordinates(e.target)
-				if (!(e.target.id in changedPixels)) {
-					if ("PIXELS" in changedPixels) {
-						changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y
-					} else {
-						changedPixels["PIXELS"]=mycoords.x+","+mycoords.y
-					}
-					changedPixels["old_"+e.target.id]=e.target.style.background;
-					if (e.button===0) {
-						e.target.style.background=selectedColor;
-						changedPixels[e.target.id]=selectedColor;
-					} else {
-						e.target.style.background="white";
-						changedPixels[e.target.id]="white";
-					}
-					changedPixels["STEPTYPE"]="ADD"
-				}
-			}
-		}
-		toolbar.style.visibility = "hidden";
-	}
-	
-	var colorPixelBasedOnID = (x,y,color)=>{
-		var cell = document.getElementById("pos_"+x+"_"+y);
-		cell.style.background=color;
-	}
-	
-	var generateTable = (columns,rows)=>{
-		var table = document.createElement("table");
-		table.style.border="1px gray dashed";
-		for (var i=0;i<rows;i++) {
-			var row = document.createElement("tr");
-			for (var j=0;j<columns;j++) {
-				var col = document.createElement("th");
-				col.style.background="white";
-				col.id="pos_"+j+"_"+i;
-				row.appendChild(col);
-			}
-			table.appendChild(row);
-		}
-		
-		table.addEventListener("click",MouseClickListener);
-		table.addEventListener("mouseover",MouseListener);
-		document.addEventListener("mouseup",MouseStateUp);
-		table.addEventListener("mousedown",MouseStateDown);
-		
-		canvas.appendChild(table);
-	}
-	
-	var createCustomColorInput = (customColorContainer,dot)=>{
-		var customColorInput = document.createElement("input");
-		customColorInput.type="color"
-		customColorInput.value="#222222"
-		customColorInput.classList.add("customColor")
-		customColorInput.id="customColor"
-		insertAfter(customColorInput,dot);
-		customColorInput.addEventListener("change",(e)=>{
-			dot.style.background=e.target.value
-			selectedColor=e.target.value
-		})
-		dot.src="transparent.png";
-		dot.style.background=customColorInput.value;
-		customColorToolbar=true;
-	}
-	
-	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;
-			})
-			toolbar.appendChild(dot);
-		}		
-		var customColorContainer = document.createElement("div");
-		//customColorContainer.classList.add("toolbar")
-		var dot = document.createElement("img")
-		dot.classList.add("dot")
-		dot.classList.add("inline")
-		dot.src="colorwheel.png"
-		customColorContainer.append(dot);
-		toolbar.appendChild(customColorContainer);
-		customColorContainer.addEventListener("click",(e)=>{
-			if (customColorToolbar) {
-				var otherDots = document.getElementsByClassName("dot");
-				for (var i=0;i<otherDots.length;i++) {
-					var dot2 = otherDots[i];
-					dot2.style.border=unselectedColorBorder;
-				}
-				dot.style.border=selectedColorBorder;
-				selectedColor=e.target.style.background
-			} else {
-				createCustomColorInput(customColorContainer,dot);
-			}
-		})
-	}
-	
-	var ModifyRows = (e)=>{
-		var table = document.getElementsByTagName("table")[0];
-		if (e.target.value>table.getElementsByTagName("tr").length) {
-			//Add a new row.
-			//To add a new row, just append a new row and a new set of cells.
-			var newcells = 0;
-			while (table.getElementsByTagName("tr").length<e.target.value) {
-				//CREATE X amount of new rows.
-				var newrow = document.createElement("tr");
-				for (var i=0;i<COLS;i++){
-					var col = document.createElement("th");
-					col.style.background="white";
-					col.style.border=document.querySelector("table").style.border;
-					col.id="pos_"+i+"_"+(Number(ROWS)+Number(newcells));
-					newrow.appendChild(col);
-				}
-				newcells++;
-				table.appendChild(newrow);
-			}
-		} else {
-			//Remove the last row.
-			while (table.getElementsByTagName("tr").length>e.target.value) {
-				//REMOVE X amount of rows.
-				var lastrow = table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1]
-				//For all cells, store their color values.
-				for (var cell of lastrow.getElementsByTagName("th")) {
-					var coords = getCoordinates(cell)
-					changedPixels[cell.id]=cell.style.background
-				}
-				lastrow.remove();
-			}
-		}
-		changedPixels["newsize"]=e.target.value;
-		changedPixels["oldsize"]=ROWS
-		changedPixels["STEPTYPE"]="RESIZEROWS"
-		ROWS = e.target.value;
-		AddStoredPixelStep();
-	}
-	
-	var ModifyCols = (e)=>{
-		var table = document.getElementsByTagName("table")[0];
-		changedPixels["oldsize"]=COLS
-		if (e.target.value>COLS) {
-			//console.log("In here.")
-			while (e.target.value>COLS) {
-				for (var i=0;i<table.getElementsByTagName("tr").length;i++) {
-					var row = table.getElementsByTagName("tr")[i]
-					var col = document.createElement("th");
-					col.style.background="white";
-					col.style.border=document.querySelector("table").style.border;
-					col.id="pos_"+COLS+"_"+i;
-					row.appendChild(col);
-				}
-				COLS++;
-			}
-		} else {
-			while (e.target.value<COLS) {
-				for (var i=0;i<table.getElementsByTagName("tr").length;i++) {
-					var row = table.getElementsByTagName("tr")[i];
-					var col = row.getElementsByTagName("th")[row.getElementsByTagName("th").length-1]
-					var coords = getCoordinates(col)
-					changedPixels[col.id]=col.style.background
-					col.remove();
-					//For all cells, store their color values.
-				}
-				COLS--;
-			}
-		}
-		changedPixels["newsize"]=e.target.value;
-		changedPixels["STEPTYPE"]="RESIZECOLS"
-		COLS = e.target.value;
-		AddStoredPixelStep();
-	}
-	
-	var AddStoredPixelStep = ()=>{
-		if ("STEPTYPE" in changedPixels) {
-			//Add changedPixels to the current pixelState.
-			if (currentPixelState!==-1 && currentPixelState!==pixelStates.length) {
-				//Delete everything after this.
-				if (currentPixelState===0) {
-					pixelStates = [];
-				} else {
-					pixelStates = pixelStates.slice(0,currentPixelState)
-				}
-				redoButton.disabled = true;
-			}
-			
-			if (pixelStates.length<20) {
-				pixelStates.push(changedPixels);
-				undoButton.disabled = false;
-				redoButton.disabled = true;
-			} else {
-				pixelStates = pixelStates.slice(1)
-				pixelStates.push(changedPixels)
-			}
-			changedPixels = {}
-			//console.log(pixelStates)
-			currentPixelState = pixelStates.length;
-		}
-	}
-	
-	var LoadData = ()=>{
-		var data = JSON.parse(localStorage.getItem("save_pixelart"))
-		
-		var ROWSDATA = document.getElementById("rowcontrol")
-		ROWSDATA.value=data["ROWS"]
-		ModifyRows({"target":ROWSDATA});
-		var COLSDATA = document.getElementById("colcontrol")
-		COLSDATA.value=data["COLS"]
-		ModifyCols({"target":COLSDATA});
-		if ("CUSTOMCOLOR" in data) {
-			if (!customColorToolbar) {
-				var customColorContainer = document.getElementsByClassName("toolbar")[0];
-				var dot = document.getElementsByTagName("img")[0];
-				createCustomColorInput(customColorContainer,dot);
-			}
-			
-			document.getElementsByTagName("img")[0].style.background = data["CUSTOMCOLOR"];
-			document.getElementById("customColor").value = rgbToHex(data["CUSTOMCOLOR"]);
-		}
-		
-		for (var i=0;i<ROWS;i++) {
-			for (var j=0;j<COLS;j++) {
-				var posKey = "pos_"+j+"_"+i;
-				var cell = document.getElementById(posKey);
-				cell.style.background=data[posKey]
-			}
-		}
-		var consoleText = document.createElement("span")
-		consoleText.innerHTML = "Loaded!"
-		consoleText.classList.add("console")
-		toolbar.appendChild(consoleText);
-		setTimeout(()=>{
-			var consoleText = document.getElementsByClassName("console")[0];
-			consoleText.remove();
-		},2000)
-		
-		undoButton.disabled=true;
-		redoButton.disabled=true;
-		pixelStates = []
-		currentPixelState = -1;
-	}
-	
-	var SaveData = ()=>{
-		var finalData = {};
-		for (var i=0;i<ROWS;i++) {
-			for (var j=0;j<COLS;j++) {
-				var posKey = "pos_"+j+"_"+i;
-				var cell = document.getElementById(posKey);
-				finalData[posKey]=cell.style.background
-			}
-		}
-		finalData["ROWS"]=ROWS;
-		finalData["COLS"]=COLS;
-		finalData["CUSTOMCOLOR"]=document.getElementsByTagName("img")[0].style.background;
-		console.log(JSON.stringify(finalData))
-		localStorage.setItem("save_pixelart",JSON.stringify(finalData))
-		var consoleText = document.createElement("span")
-		consoleText.innerHTML = "Saved!"
-		consoleText.classList.add("console")
-		toolbar.appendChild(consoleText);
-		setTimeout(()=>{
-			var consoleText = document.getElementsByClassName("console")[0];
-			consoleText.remove();
-		},2000)
-	}
-	
-	var generateControls = ()=>{
-		var rowsLabel = document.createElement("label")
-		rowsLabel.innerHTML = "Rows"
-		rowsLabel.classList.add("tinylabel")
-		rowsControl.type = "number"
-		rowsControl.classList.add("inline")
-		rowsControl.classList.add("small")
-		rowsControl.id = "rowcontrol"
-		rowsControl.value = ROWS;
-		rowsControl.addEventListener("change",ModifyRows)
-		toolbar.appendChild(rowsLabel);
-		toolbar.appendChild(rowsControl);
-		var colsLabel = document.createElement("label")
-		colsLabel.innerHTML = "Cols"
-		colsLabel.classList.add("tinylabel")
-		colsControl.type = "number"
-		colsControl.classList.add("inline")
-		colsControl.classList.add("small")
-		colsControl.id = "colcontrol"
-		colsControl.value = COLS;
-		colsControl.addEventListener("change",ModifyCols)
-		toolbar.appendChild(colsLabel);
-		toolbar.appendChild(colsControl);
-		var loadButton = document.createElement("button")
-		loadButton.type = "button"
-		loadButton.innerText = "Load"
-		loadButton.classList.add("loadbutton")
-		loadButton.addEventListener("click",LoadData)
-		var saveButton = document.createElement("button")
-		saveButton.type = "button"
-		saveButton.innerText = "Save"
-		saveButton.classList.add("savebutton")
-		saveButton.addEventListener("click",SaveData)
-		toolbar.appendChild(loadButton);
-		toolbar.appendChild(saveButton);
-		undoButton.type = "button"
-		undoButton.innerText = "Undo"
-		undoButton.classList.add("undobutton")
-		undoButton.disabled = true
-		undoButton.addEventListener("click",Undo)
-		redoButton.type = "button"
-		redoButton.innerText = "Redo"
-		redoButton.classList.add("redobutton")
-		redoButton.addEventListener("click",Redo)
-		redoButton.disabled = true
-		toolbar.appendChild(undoButton);
-		toolbar.appendChild(redoButton);
-		var toggleGridButton = document.createElement("img");
-		toggleGridButton.src = "gridtoggle.png";
-		toggleGridButton.classList.add("tinybutton");
-		toggleGridButton.addEventListener("click",()=>{
-			var elements = document.querySelectorAll("table,tr,th")
-			if (document.querySelector("body > div.container > div > table").style.border.includes("1px")) {
-				for (var item of elements) {
-					item.style.border = "0px";
-				}
-			} else {
-				for (var item of elements) {
-					item.style.border = "1px gray dashed";
-				}
-			}
-		})
-		toolbar.appendChild(toggleGridButton);
-		var fillToolButton = document.createElement("img");
-		fillToolButton.src = "filltool.png"
-		fillToolButton.classList.add("tinybutton")
-		fillToolButton.addEventListener("click",()=>{
-			fillTool = !fillTool
-			if (fillTool) {
-				fillToolButton.style.border = "2px red solid"
-			} else {
-				fillToolButton.style.border = "2px black solid"
-			}
-		})
-		toolbar.appendChild(fillToolButton);
-	}
-	
-	var floodFill = (startx,starty,baseColor,newColor,force=false)=>{
-		//console.log("Flood fill at "+startx+","+starty)
-		//Start a flood fill in 4 cardinations directions and the current spot.
-		//Set the base color to what the dot currently is. Then all around this spot, fill in any dots that are also this color. Don't spread the dot if there's not a color of that type.
-		if (baseColor===newColor) {
-			return
-		}
-		startx = Number(startx)
-		starty = Number(starty)
-		if (document.getElementById("pos_"+(startx)+"_"+(starty)).style.background===baseColor) {
-			var target = document.getElementById("pos_"+(startx)+"_"+(starty));
-			if (!(target.id in changedPixels)) {
-				var mycoords = getCoordinates(target)
-				if ("PIXELS" in changedPixels) {
-					changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y
-				} else {
-					changedPixels["PIXELS"]=mycoords.x+","+mycoords.y
-				}
-				changedPixels["old_"+target.id]=target.style.background;
-				changedPixels[target.id]=newColor
-				changedPixels["STEPTYPE"]="ADD"
-			}
-			target.style.background = newColor
-			floodFill(startx,starty,baseColor,newColor,force)
-		}
-		if (startx+1 < COLS && document.getElementById("pos_"+(startx+1)+"_"+(starty+0)).style.background===baseColor) {
-			var target = document.getElementById("pos_"+(startx+1)+"_"+(starty));
-			if (!(target.id in changedPixels)) {
-				var mycoords = getCoordinates(target)
-				if ("PIXELS" in changedPixels) {
-					changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y
-				} else {
-					changedPixels["PIXELS"]=mycoords.x+","+mycoords.y
-				}
-				changedPixels["old_"+target.id]=target.style.background;
-				changedPixels[target.id]=newColor
-				changedPixels["STEPTYPE"]="ADD"
-			}
-			target.style.background = newColor
-			floodFill(startx+1,starty,baseColor,newColor,force)
-		}
-		if (startx-1 >= 0 && document.getElementById("pos_"+(startx-1)+"_"+(starty+0)).style.background===baseColor) {
-			var target = document.getElementById("pos_"+(startx-1)+"_"+(starty));
-			if (!(target.id in changedPixels)) {
-				var mycoords = getCoordinates(target)
-				if ("PIXELS" in changedPixels) {
-					changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y
-				} else {
-					changedPixels["PIXELS"]=mycoords.x+","+mycoords.y
-				}
-				changedPixels["old_"+target.id]=target.style.background;
-				changedPixels[target.id]=newColor
-				changedPixels["STEPTYPE"]="ADD"
-			}
-			target.style.background = newColor
-			floodFill(startx-1,starty,baseColor,newColor,force)
-		}
-		if (starty+1 < ROWS && document.getElementById("pos_"+(startx)+"_"+(starty+1)).style.background===baseColor) {
-			var target = document.getElementById("pos_"+(startx)+"_"+(starty+1));
-			if (!(target.id in changedPixels)) {
-				var mycoords = getCoordinates(target)
-				if ("PIXELS" in changedPixels) {
-					changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y
-				} else {
-					changedPixels["PIXELS"]=mycoords.x+","+mycoords.y
-				}
-				changedPixels["old_"+target.id]=target.style.background;
-				changedPixels[target.id]=newColor
-				changedPixels["STEPTYPE"]="ADD"
-			}
-			target.style.background = newColor
-			floodFill(startx,starty+1,baseColor,newColor,force)
-		}
-		if (starty-1 >= 0 && document.getElementById("pos_"+(startx)+"_"+(starty-1)).style.background===baseColor) {
-			var target = document.getElementById("pos_"+(startx)+"_"+(starty-1));
-			if (!(target.id in changedPixels)) {
-				var mycoords = getCoordinates(target)
-				if ("PIXELS" in changedPixels) {
-					changedPixels["PIXELS"]+=","+mycoords.x+","+mycoords.y
-				} else {
-					changedPixels["PIXELS"]=mycoords.x+","+mycoords.y
-				}
-				changedPixels["old_"+target.id]=target.style.background;
-				changedPixels[target.id]=newColor
-				changedPixels["STEPTYPE"]="ADD"
-			}
-			target.style.background = newColor
-			floodFill(startx,starty-1,baseColor,newColor,force)
-		}
-	}
-	
-	generateTable(ROWS,COLS);
-	canvas.appendChild(document.createElement("br"))
-	generateColors(false);
-	generateControls();
-	
-	document.addEventListener("scroll",()=>{
-		toolbar.style.position="absolute";
-		toolbar.style.left=window.scrollX+"px";
-		toolbar.style.bottom=-window.scrollY+"px";
-	})
-})

colorList.js

@@ -1,18 +0,0 @@
-const CSS_COLOR_NAMES = [
-  "black",
-  "silver",
-  "gray",
-  "white",
-  "maroon",
-  "red",
-  "purple",
-  "fuchsia",
-  "green",
-  "lime",
-  "olive",
-  "yellow",
-  "navy",
-  "blue",
-  "teal",
-  "aqua"
-];

index.html

@@ -1,19 +1,8 @@
-<!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="container">
-			<div class="canvas">
-			
-			</div>
-		</div>
-		<div class="toolbar">
-		</div>
-	</body>
+    <title>Pixel Art Maker</title>
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <script defer type="module" src="index.js"></script>
+    </head>
+    <body></body>
 </html>

index.js

@@ -0,0 +1,107 @@
+const WIDTH = 48;
+const HEIGHT = 24;
+
+// State
+let brushColor = '';
+let mouseDown = false;
+document.body.addEventListener('mouseup', () => mouseDown = false);
+document.body.addEventListener('mouseenter', () => mouseDown = false);
+
+// Container
+const container = document.createElement('div');
+container.className = 'container';
+container.style.width = `${WIDTH * 16}px`;
+
+// Canvas
+const canvas = document.createElement('div');
+canvas.className = 'canvas';
+canvas.addEventListener('mousedown', () => mouseDown = true);
+const pixels = [];
+for(let y = 0; y < HEIGHT; y++) {
+    const pxRow = [];
+    const row = document.createElement('div');
+    row.className = 'row';
+    for(let x = 0; x < WIDTH; x++) {
+        const pixel = document.createElement('div');
+        pixel.className = 'pixel';
+        pixel.addEventListener('click', () => pixel.style.backgroundColor = brushColor);
+        pixel.addEventListener('mouseover', () => {
+            if(!mouseDown) return;
+            pixel.style.backgroundColor = brushColor;
+        });
+        row.appendChild(pixel);
+        pxRow.push(pixel);
+    }
+    canvas.appendChild(row);
+    pixels.push(pxRow);
+}
+container.appendChild(canvas);
+
+// Palette
+const colors = ['#b23232', '#ff4848', '#ff6c6c', '#e59b40', '#ffad48', '#ffc57e', '#e5de40', '#fff748', '#fffa91', '#39cc4b', '#48ff5e', '#91ff9e', '#3248b2', '#4867ff', '#91a3ff', '#6432b2', '#8f48ff', '#bb91ff', '#7c2b99', '#cf48ff', '#e291ff', '#000000', '#323232', '#666666', '#999999', '#cccccc', '#ffffff', '#3a2119', '#512e23', '#754233', '#90675b', '#ac8d84'];
+const palette = document.createElement('div');
+palette.className = 'palette';
+for(let color of colors) {
+    const swatch = document.createElement('div');
+    swatch.className = 'swatch';
+    swatch.style.backgroundColor = color;
+    swatch.addEventListener('click', () => {
+        brushColor = color;
+        title.style.backgroundColor = color;
+    });
+    palette.appendChild(swatch);
+}
+const title = document.createElement('h2');
+title.innerText = 'BRUSH COLOR';
+palette.appendChild(title);
+container.appendChild(palette);
+
+// File reader
+/*
+<input type='file' id='fileinput'>
+<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
+ */
+const fileDiv = document.createElement('div');
+const fileInput = document.createElement('input');
+fileInput.setAttribute('type', 'file');
+fileDiv.appendChild(fileInput);
+const btnLoad = document.createElement('input');
+btnLoad.setAttribute('type', 'button');
+btnLoad.setAttribute('value', 'Load');
+btnLoad.addEventListener('click', () => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+        const img = new Image();
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.setAttribute('visibility', 'hidden');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            document.body.appendChild(canvas);
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0, img.width, img.height);
+            for(let y = 0; y < img.height / 16; y++) {
+                for(let x = 0; x < img.width / 16; x++) {
+                    const p = ctx.getImageData(x * 16 + 8, y * 16 + 8, 1, 1).data;
+                    const hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
+                    if(y >= pixels.length) continue;
+                    if(x >= pixels[y].length) continue;
+                    pixels[y][x].style.backgroundColor = hex;
+                }
+            }
+            document.body.removeChild(canvas);
+        };
+        img.src = reader.result;
+    }, false);
+    reader.readAsDataURL(fileInput.files[0]);
+});
+fileDiv.appendChild(btnLoad);
+
+function rgbToHex(r, g, b) {
+    if (r > 255 || g > 255 || b > 255)
+        throw "Invalid color component";
+    return ((r << 16) | (g << 8) | b).toString(16);
+}
+
+document.body.appendChild(container);
+document.body.appendChild(fileDiv);

style.css

@@ -1,78 +1,55 @@
-table,tr,th{
-	border:1px gray dashed;
-	border-spacing:0px;
-	gap:0px;
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
-th{
-	min-width:16px;
-	min-height:16px;
-	width:16px;
-	height:16px;
+
+h2 {
+    font-family: "Gill Sans";
+    font-size: 24px;
+    font-weight: 400;
+    color: rgb(153, 153, 153);
+    margin: 0;
 }
-.container{
-	text-align: center;
+
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 15px;
+    background-color: rgb(229, 229, 229);
 }
-.toolbar{
-	width: 100%;
+
+.row {
+    display: flex;
 }
-.canvas{
-	display:inline-block;
-	background-color: #EEEEFF;
-	border-radius: 10%;
-	padding: 48px;
+
+.pixel {
+    width: 14px;
+    height: 14px;
+    border: 1px solid rgb(229, 229, 229);
+    background-color: white;
 }
-.customColor{
-	vertical-align: middle;
-	position:relative;
-	top:-8px;
+
+.palette {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: rgb(229, 229, 229);
+    align-items: center;
 }
-.loadbutton{
-	margin: 0px 2px 0px 2px;
-	background-color: #9999FF;
+
+.swatch {
+    width: 35px;
+    height: 35px;
+    border: 1px solid rgb(187, 187, 187);
+    border-radius: 50%;
+    display: flex;
+    margin: 2px;
 }
-.savebutton{
-	margin: 0px 2px 0px 2px;
-	background-color: #FF9999;
-}
-.undobutton{
-	margin: 0px 2px 0px 2px;
-	background-color: #99FF99;
-}
-.redobutton{
-	margin: 0px 2px 0px 2px;
-	background-color: #FFFF99;
-}
-.console{
-	font-style: strong;
-	margin-left: 4px;
-}
-.inline{
-	display:inline;
-}
-.small{
-	width:36px;
-}
-.tinylabel{
-	font-size: 12px;
-}
-.dot{
-	height: 25px;
-	width: 25px;
-	background-color: #bbb;
-	border-radius: 50%;
-	display: inline-block;
-	border:2px black solid;
-	margin-left:1px;
-}
-.tinybutton{
-	margin-top:-24px;
-	position:relative;
-	top: 6px;
-	height: 24px;
-	width: 24px;
-	background-color: #bbb;
-	border-radius: 50%;
-	display: inline-block;
-	border:2px black solid;
-	margin-left:1px;
+
+.currentSwatch {
+    width: 50px;
+    height: 35px;
+    display: flex;
 }