DEV Community

loading...
Cover image for Make Pixel art 10x faster ✨💫

Make Pixel art 10x faster ✨💫

rjitsu profile image Rishav Jadon ・6 min read

You'll never have to use the box-shadows again

So this article will be short and simple so you can just take this technique and start making wonderful pixel art!
Before stumbling on this, I used to make pixel art with box-shadow, and it is so painful! Just copy pasting values and then changing the values again and again.

If you're unfamiliar with making pixel art with box-shadows, I'll just give you a small introduction. box-shadow is a property in css which attaches one or more shadows to the element it is applied on. So if you want to make pixel art , you just create a small box, and then define ( a lot ) of box-shadows positioned differently around the screen so that you can create a nice pixel art like effect.

box-shadow

Problem with the box-shadow

By now you also might be able to see the problem in box-shadow which is the sheer work. Defining each box-shadow again and again is just too much work! Now you might be thinking why even bother making pixel art from code, as there are multitude of software like Jhey Tompkin's pxl. My answer to that is CREATIVITY. Things like pure CSS art, one div art, no div art, and pixel art are not for any productive purpose, it's for the purpose of showing your personality,creativity,imagination, and in this process you learn the deeper concepts more clearly!

The answer is in CANVAS

When box-shadow is too much of a hassle, use canvas!. I always use a reference image. We will use this image for the purpose of this article.

Reference Image of a hamster

The basic idea is : We will use the canvas API in javascript and will define our pixels by making a 2-D array, which will have our pixel values mapped perfectly along each row, and then we will fill our canvas by using nested for loops and taking values from array and fill in canvas pixel by pixel. This is much faster in comparision to the box-shadows technique!

Now let me show you how to do it with a step-by-step approach.

Step 1 : Set up our canvas

Make a canvas in your HTML of any size you want.

<canvas height="500" width="500" id="board">
</canvas>

Step 2 : Set up variables

We need to make variables for the size of pixels, for colors you will use in making your art. We will do this in our JS file.

var pixelSize = 15;
var _ = "transparent",
         b = "#000000",
         o = "orange",
         p = "hotpink"; 

Step 3 : Define our array

Now we need to fill these color values into our array according to our reference image. Just count how many pixels we need by row and by column, and we will make our grid accordingly.
Here, we need a 30 x 30 pixel grid ,so we will define an array which has 30 color values in a column, and we'll make 30 of those rows.

 var image = [
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, b, b, b, b, _, _, _, _, _, _, _, _, _, _, _, b, b, b, b, _, _, _, _, _, _],
[_, _, _, b, o, o, o, o, b, _, _, _, _, _, _, _, _, _, b, o, o, o, o, b, _, _, _, _, _],
[_, _, b, p, b, b, o, o, o, b, _, _, _, _, _, _, _, b, o, o, o, b, b, p, b, _, _, _, _],
[_, _, b, p, p, p, b, o, o, b, b, b, b, b, b, b, b, b, o, o, b, p, p, p, b, _, _, _, _],
[_, _, b, p, p, p, b, o, o, o, o, o, o, o, o, o, o, o, o, o, b, p, p, p, b, _, _, _, _],
[_, _, b, p, p, b, o, o, o, o, o, o, o, o, o, o, o, _, _, _, _, b, p, p, b, _, _, _, _],
[_, _, _, b, b, o, o, o, o, o, o, o, o, o, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _],
[_, _, _, _, b, o, o, b, b, b, o, o, _, _, _, _, _, b, b, b, _, _, b, _, _, _, _, _, _],
[_, _, _, _, b, o, b, b, _, _, b, _, _, _, _, _, b, _, _, b, b, _, b, _, _, _, _, _, _],
[_, _, _, b, o, o, b, b, _, _, b, _, _, _, _, _, b, _, _, b, b, _, _, b, _, _, _, _, _],
[_, _, _, b, _, _, b, _, b, b, b, _, _, _, _, _, b, b, b, _, b, _, _, b, _, _, _, _, _],
[_, _, _, b, b, _, _, b, b, b, _, _, _, _, _, _, _, b, b, b, _, _, b, b, _, _, _, _, _],
[_, _, _, b, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _],
[_, _, _, b, b, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _],
[_, _, _, b, _, _, _, _, _, _, b, _, _, b, _, _, b, _, _, _, _, _, _, b, _, _, _, _, _],
[_, _, _, _, b, _, _, _, _, _, _, b, b, _, b, b, _, _, _, _, _, _, b, _, _, _, _, _, _],
[_, _, _, _, b, b, o, o, _, _, _, _, _, _, _, _, _, _, o, o, b, b, b, _, _, _, _, _, _],
[_, _, _, _, b, o, o, _, _, b, _, _, _, _, _, _, _, b, _, _, o, o, b, _, _, _, _, _, _],
[_, _, _, _, b, o, o, _, p, p, b, _, _, _, _, _, b, p, p, _, o, o, b, _, _, _, _, _, _],
[_, _, _, _, b, o, _, b, p, p, b, _, _, _, _, _, b, p, p, b, _, o, b, _, _, _, _, _, _],
[_, _, _, _, b, _, _, _, b, b, _, _, _, _, _, _, _, b, b, _, _, _, b, _, _, _, _, _, _],
[_, _, _, _, _, b, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, b, _, _, _, _, _, _, _],
[_, _, _, _, _, _, b, _, _, _, b, b, b, b, b, b, b, _, _, _, b, _, _, _, _, _, _, _, _],
[_, _, _, _, _, b, p, p, b, b, _, _, _, _, _, _, _, b, b, p, p, b, _, _, _, _, _, _, _],
[_, _, _, _, _, _, b, b, _, _, _, _, _, _, _, _, _, _, _, b, b, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _]];

It looks like a really big array, but trust me, if you know the pain of making pixel art by box-shadows, this will definitely help a lot!

Step 4: Filling our canvas

The only thing left to do is fill the canvas by applying nested for loops, and filling our pixels by the colors in our array.

var canvas = document.getElementById('board');
var ctx = canvas.getContext('2d');
ctx.lineWidth = .25;
for(var i=0;i<29;i++) {
 for(var j=0;j<29;j++) {
   ctx.fillStyle = image[j][i];
   ctx.fillRect(i*pixelSize, j*pixelSize, pixelSize, pixelSize);
     }
   }

After positioning our canvas, and adding some styling to it, the finished art looks like this:
Final art

That's it! Now I want you to make your pixel art, and show it to the world!

Discussion (16)

pic
Editor guide
Collapse
macsikora profile image
Maciej Sikora

Its great until you need to make this grid by hand :D

Collapse
dailydevtips1 profile image
Chris Bongers

Wow, that really is incredible, Going to give Canvas another try!

Collapse
rjitsu profile image
Rishav Jadon Author

Yeah. please do! It's great for generative art as well!

Collapse
dailydevtips1 profile image
Chris Bongers

Now that's a great idea!

Collapse
thisismanaswini profile image
Manaswini

This is mindblowing!! Makes me want to try canvas right away!!

Collapse
rjitsu profile image
Rishav Jadon Author

Thanks manaswini!
And yeah canvas is amazing 😁

Collapse
scroung720 profile image
scroung720

Thank you for sharing. This is article could be very useful for people learning canvas.

Collapse
rjitsu profile image
Rishav Jadon Author

You're welcome!
I'll keep posting as I learn!

Collapse
lexlohr profile image
Alex Lohr

Maybe using a template literal instead of an array will improve the usability of this code, like this: codepen.io/atk-the-vuer/pen/mdPWgbW

Collapse
rjitsu profile image
Rishav Jadon Author

Yes that's a great suggestion!

Collapse
ozakaran profile image
🆖 Karan Oza

That's a nice debut article rishav...
All the best for the coming ones...

Collapse
rjitsu profile image
Rishav Jadon Author

Thank you so much karan!

Collapse
kacperturon profile image
Kacper Turon

Why not create it in something like illustrator and export an svg? what's the benefit of the canvas method? I feel like im missing something obvious, cheers

Collapse
rjitsu profile image
Rishav Jadon Author

If you follow twitter,you must have seen people create css art, although we can do much better in illustrator but the point is just to get creative!
So, as I said up there there's not really a destination, we just enjoying the journey

Collapse
nyxtom profile image
Tom Holloway 🏕

Canvas is great, really like these type of articles. Nicely done :)

Collapse
rjitsu profile image