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.
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.
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:
That's it! Now I want you to make your pixel art, and show it to the world!
Top comments (16)
Its great until you need to make this grid by hand :D
Wow, that really is incredible, Going to give Canvas another try!
Yeah. please do! It's great for generative art as well!
Now that's a great idea!
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
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
Thank you for sharing. This is article could be very useful for people learning canvas.
You're welcome!
I'll keep posting as I learn!
This is mindblowing!! Makes me want to try canvas right away!!
Thanks manaswini!
And yeah canvas is amazing 😁
Canvas is great, really like these type of articles. Nicely done :)
Thanks :)
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
Yes that's a great suggestion!
That's a nice debut article rishav...
All the best for the coming ones...
Thank you so much karan!