Make Pixel art 10x faster ✨💫
Tags: css, javascript, webdev
Published: 2020-08-25 14:05:01


**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 <code>box-shadow</code>, and it is so painful! Just copy pasting values and then changing the values again and again.

{% codepen https://codepen.io/Rj456/pen/WNrMNKE default-tab=js,result %}

If you're unfamiliar with making pixel art with box-shadows, I'll just give you a small introduction. <code>box-shadow</code> 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](https://res.cloudinary.com/codepenrishav/image/upload/v1598362679/bCiQc8dESeWm_1_qin5u4.jpg)

# Problem with the box-shadow
By now you also might be able to see the problem in <code>box-shadow</code> which is the sheer work. Defining each <code>box-shadow</code> 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](https://twitter.com/jh3yy) [pxl](https://pxl.netlify.app/). 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 <code>box-shadow</code> 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](https://res.cloudinary.com/codepenrishav/image/upload/v1598363669/hamster_gvoz7f.jpg)

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 <code>for</code> 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](https://res.cloudinary.com/codepenrishav/image/upload/v1598363905/Screenshot_507_jhmmgq.png)

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