sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joshua Sigona 2020-06-13 05:38:32 +09:00
parent 59d48fc39c
commit 8d1614dcb0
5 changed files with 134 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
canvas.js Normal file
View File

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

18
colorList.js Normal file
View File

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

BIN
colorwheel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

15
index.html
View File

@ -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>

20
style.css Normal file
View File

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