Let's create a Pixel Art maker with JavaScript
Shuvo
Posted on November 25, 2021
In one of my previous article I have showed you how to create a paint app using JavaScript. And in this article we will learn how to create a pixel art generator using HTML, CSS and vanilla JS.
Pixel art app is also a drawing/paint app but you have big pixels so they are less in number so your drawing won't be that detailed
Video tutorial available here
Our app will have:
- Color picker/input to change the color of our brush
- A reset button to reset our grid
- A input through which we can set the size of our pixels/grid
Let's start
So lets create the index.html
<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<button class="btn">Reset</button>
<input type="color" value="#00eeff" class="color">
<input type="number" value="30" class="size">
</div>
<div class="container">
<!-- Here we will add divs representing our pixels -->
</div>
<script src="main.js"></script>
</body>
</html>
and now lets style them in our style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
}
body{
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.navbar, .container{
background-color: rgb(28, 28, 29);
width: 800px;
border-radius: 3px;
}
.navbar{
padding: 1em;
margin-bottom: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.btn, input{
height: 35px;
padding: 0 1em;
}
.color{
padding: 0 .25em;
width: 100px;
margin: 0 1em;
}
.container{
--size: 4;
height: 800px;
display: grid;
grid-template-columns: repeat(var(--size), 1fr);
grid-template-rows: repeat(var(--size), 1fr);
gap: 3px;
padding: 3px;
}
.pixel{
background-color: rgb(61, 61, 61);
border-radius: 2px;
}
Notice that we are using --size variable. We will be updating that in our JavaScript
Anyways now if we open it up in our browser we should see something like this
Now in our JavaScript lets populate the container with divs which will be our pixels.
We will create a helper function called populate for that
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')
// Getting the value of the size input
let size = sizeEl.value
function populate(size) {
// Updating the --size CSS variable
container.style.setProperty('--size', size)
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div')
div.classList.add('pixel')
container.appendChild(div)
}
}
populate(size)
Now you should see a grid displayed
Okay so now when we press down our mouse and move it, we want to color the div that is under our cursor.
So lets add mouseover and mousdown event on our pixels
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')
let size = sizeEl.value
// We will only color our pixels if draw is set to true
let draw = false
function populate(size) {
container.style.setProperty('--size', size)
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div')
div.classList.add('pixel')
div.addEventListener('mouseover', function(){
if(!draw) return
div.style.backgroundColor = color.value
})
div.addEventListener('mousdown', function(){
// We don't need to check if draw is true here
// because if we click on a pixel that means we want to draw that pixel
div.style.backgroundColor = color.value
})
container.appendChild(div)
}
}
// Set draw to true when the user press down the mouse
window.addEventListener("mousedown", function(){
draw = true
})
// Set draw to false when the user release the mouse
window.addEventListener("mouseup", function(){
draw = false
})
populate(size)
Now lets make the reset button work. When the reset button is clicked we simply have to empty out the inner html of our container and call the populate function again.
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')
let size = sizeEl.value
let draw = false
function populate(size) {
container.style.setProperty('--size', size)
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div')
div.classList.add('pixel')
div.addEventListener('mouseover', function(){
if(!draw) return
div.style.backgroundColor = color.value
})
div.addEventListener('mousdown', function(){
div.style.backgroundColor = color.value
})
container.appendChild(div)
}
}
window.addEventListener("mousedown", function(){
draw = true
})
window.addEventListener("mouseup", function(){
draw = false
})
function reset(){
container.innerHTML = ''
populate(size)
}
resetBtn.addEventListener('click', reset)
populate(size)
And finally when we change the value of our input we want to create a new grid with the entered size.
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')
let size = sizeEl.value
let draw = false
function populate(size) {
container.style.setProperty('--size', size)
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div')
div.classList.add('pixel')
div.addEventListener('mouseover', function(){
if(!draw) return
div.style.backgroundColor = color.value
})
div.addEventListener('mousdown', function(){
div.style.backgroundColor = color.value
})
container.appendChild(div)
}
}
window.addEventListener("mousedown", function(){
draw = true
})
window.addEventListener("mouseup", function(){
draw = false
})
function reset(){
container.innerHTML = ''
populate(size)
}
resetBtn.addEventListener('click', reset)
sizeEl.addEventListener('keyup', function(){
size = sizeEl.value
reset()
})
populate(size)
And just like that we have successfully created a Pixel Art creator using vanilla JavaScript.
You can find the finished codes here.
Make sure you checkout my other articles and YouTube channel
Was it helpful? Support me on Patreon
Posted on November 25, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
