Created
April 9, 2019 06:51
-
-
Save ammaratef45/e3c9865067debe2b2183134c43d48245 to your computer and use it in GitHub Desktop.
Art Pixel maker with saving the art image allowed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //imports useful elements, and assigns them to variables | |
| var canvas = document.getElementById("pixelCanvas"); | |
| var color = document.getElementById("colorPicker"); | |
| var sizePicker = document.getElementById("sizePicker"); | |
| var height = document.getElementById("inputHeight"); | |
| var width = document.getElementById("inputWidth"); | |
| var toggle = document.getElementById("gridToggle"); | |
| var save = document.getElementById("saveArt"); | |
| //function to create grid and assign event listeners to all cells on creation | |
| function makeGrid(height, width) { | |
| for (let y = 0; y < height; y++) { | |
| let row = canvas.insertRow(y); | |
| for (let x = 0; x < width; x++) { | |
| let cell = row.insertCell(x); | |
| cell.addEventListener("mousedown", function(evt) { | |
| cell.style.backgroundColor = color.value; | |
| cell.addEventListener("contextmenu", function(evt) { | |
| evt.preventDefault(); | |
| cell.style.backgroundColor = "white"; | |
| } ) | |
| } ) | |
| } | |
| } | |
| } | |
| //function to toggle on/off grid within the design canvas | |
| toggle.addEventListener("click", function() { | |
| var elementsTd = document.getElementsByTagName("td"); | |
| var elementsTr = document.getElementsByTagName("tr"); | |
| for (var i=0; i<elementsTd.length; ++i) { | |
| elementsTd[i].classList.toggle("off"); | |
| } | |
| for (var j=0; j<elementsTr.length; ++j) { | |
| elementsTr[j].classList.toggle("off"); | |
| } | |
| }); | |
| //function that uses the size picker submit to call makeGrid() funtion | |
| sizePicker.addEventListener("submit", function(evt) { | |
| evt.preventDefault(); | |
| while (canvas.hasChildNodes()) { | |
| canvas.removeChild(canvas.lastChild); | |
| } | |
| makeGrid(height.value, width.value); | |
| }); | |
| //function that saves the art as canvas | |
| save.addEventListener("click", function(evt) { | |
| evt.preventDefault(); | |
| html2canvas(canvas).then(canvas => { | |
| document.body.appendChild(canvas) | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Pixel Art Maker!</title> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <h1>Pixel Art Maker</h1> | |
| <h2>Choose Grid Size</h2> | |
| <form id="sizePicker"> | |
| Grid Height: | |
| <input type="number" id="inputHeight" name="height" min="1" value="20"> | |
| Grid Width: | |
| <input type="number" id="inputWidth" name="width" min="1" value="20"> | |
| <input type="submit"> | |
| </form> | |
| <h2>Pick A Color</h2> | |
| <input type="color" id="colorPicker"> | |
| <h2>Design Canvas</h2> | |
| <table id="pixelCanvas"></table> | |
| <h3>Toggle Grid: <button button type="button" id="gridToggle">On/Off</button></h3> | |
| <h2>Click to <span class="fill">Fill</span> / Right-Click to <span class="erase">Erase</span></h2> | |
| <button button type="button" id="saveArt">Save</button> | |
| <script src="designs.js"></script> | |
| <script src="html2canvas.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment