DEV Community

Cover image for Make Pixel art 10x faster ✨💫
Rishav Jadon
Rishav Jadon

Posted on

Make Pixel art 10x faster ✨💫

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>
Enter fullscreen mode Exit fullscreen mode

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"; 
Enter fullscreen mode Exit fullscreen mode

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, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _],
[_, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _, _]];
Enter fullscreen mode Exit fullscreen mode

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);
     }
   }
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (16)

Collapse
 
macsikora profile image
Pragmatic Maciej

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

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

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

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

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

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

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
Rishav Jadon

Thanks :)