add pixel art creator (#270)

zero-to-mastery · May 22, 2022 · 0e8ee76 · 0e8ee76
1 parent ed4cee6
commit 0e8ee76
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 0 deletions.
diff --git a/src/art/osHamad/icon.png b/src/art/osHamad/icon.png
diff --git a/src/art/osHamad/index.html b/src/art/osHamad/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Document</title>
+</head>
+<body>
+    <div id="container"></div>
+    <label for="color">Brush Color: </label>
+    <input type="color" name="color" id="color-select">
+    <br>
+    <label for="color">Brush Size: </label>
+    <input type="number" name="size" id="size-select" min="10" max="50" step="10" value="50">
+    <br>
+    <button id="clear-canvas">Clear</button>
+    <br>
+    <canvas id="pixel-canvas" width="500" height="500"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/src/art/osHamad/meta.json b/src/art/osHamad/meta.json
@@ -0,0 +1,5 @@
+{
+    "art_name": "Pixel Art Maker",
+    "author_name": "osama",
+    "author_github_url": "https://github.com/osHamad/"
+}
diff --git a/src/art/osHamad/script.js b/src/art/osHamad/script.js
@@ -0,0 +1,14 @@
+const canvas = document.getElementById('pixel-canvas')
+const ctx = canvas.getContext('2d')
+document.getElementById('clear-canvas').addEventListener('click', ()=>{
+    ctx.clearRect(0, 0, 500, 500)
+})
+
+canvas.addEventListener('click', function(event) {
+    const color = document.getElementById('color-select').value
+    const size = parseInt(document.getElementById('size-select').value)
+    const x = Math.floor(event.layerX/size)
+    const y = Math.floor(event.layerY/size)
+    ctx.fillStyle = color
+    ctx.fillRect(x*size, y*size, size+1, size+1)
+})
diff --git a/src/art/osHamad/styles.css b/src/art/osHamad/styles.css
@@ -0,0 +1,3 @@
+#pixel-canvas {
+    border: 1px solid black;
+}