Tutorial: Pixel Art Enlargement in JavaScript

“Pixel Art Enlarge” enlarges pixel art to any desired size, and draws it on a canvas element. This is much more effective than simply up-scaling an image. Modern browsers typically try to apply a bilinear filter to blur the edges and fill in missing pixel data. Normally this is acceptable. However, Pixel Art is best showcased without any filtering, so I have devised this setup.

Secondly, file sizes can be greatly reduced. For example, in the demo below the source image is a 3KB .png file vs. an enlarged version at 35KB .jpg file. That is a factor of 10. Multiply that by thousands of images, and that is quite a lot of bandwidth.

View jsFiddle Demo
Let’s look at a whole page and dissect it:

Rows 1-5 are standard HTML elements.

Row 6 is an img element. However take note that it has an “id”, the “src” is set to our micro image to enlarge, and the “display” is set to “none.” I set display to none, because I actually don’t want to see the image, just the enlarged version.

Row 7 is a canvas element. This too has a unique “id”. Also take note that the height and width are set. I chose 340×500 because that is 10 times the 34×50 pixels of my original image. I plan to scale this image up by a factor of 10.

Row 10 starts our JavaScript.

Row 12 declares a function with the name “enlarge” and takes a argument named “squareSize”. “squareSize” Will be the factor that we wish to upscale our pixel art. Lets take a size of 10 for example. For every one pixel of the original image, the new image will keep the same color for a 10 pixel square.

Rows 13-14 declares two starting variables for the “x” and “y” coordinates that we will use to start drawing our enlarged square.

This is where it gets interesting!

Row 16 sets up a variable to hold our canvas that we wish to render our final image to.

Row 17 uses the getContext() method. This method returns an object that provides us with methods and properties for drawing on our canvas.

Row 19 stores a shortcut to our source image.

Row 21 creates a blank canvas that we will draw our original image to. We do this so in the next row we can call the getContext() method. This will allow us to write to the canvas, as well as get the information for each pixel in image.

Row 22 calls the getConext() method on our blank canvas.

Row 23 draws our source image to our blank canvas starting at the origin of the canvas.

Row 25-26 stores our original image’s dimensions, or more correctly, the amount of pixels wide and high the image is.

Row 28 creates a “for” loop that will run once for every pixel in the height of the original source image.

Row 29 creates a “for” loop that will run once for every pixel in the width of the original source image. We will read each pixel in a row and then move on to the next row.

Row 30 stores an object returned with the getImageData() method. This object stores the pixel’s “rgba” values in an array. Since we are only interested in 1 pixel at a time we tell the method where to start, and to end 1 pixel wide and high. This to me, keeps the code manageable and readable.

Rows 31-32 stores the starting points of where to draw on the canvas our solid color. This is dependent on what row and column the code is at, multiplied by the user defined squareSize.

Row 33 stores (in our context2D object) the red, green, blue, and alpha values, that we sampled from our 1 pixel that the code is currently looking at.

Row 34 fills in a rectangle starting at our stored start “x” and “y” locations and ends how ever many pixels wide and high our user defined “squareSize” is set.

Rows 35-37 closes our “for” loops and “enlarge” function.

Row 39 calls our function when the window loads, passing our user defined “squareSize”.

Rows 40-41 closes all remaining open tags.

That it!

You now have the knowledge to enlarge your own pixel art for all to admire.

There will be a follow up tutorial covering the same topic but with jQuery for more condensed code.

Tutorial: Pixel Art Enlargement in jQuery

Posted in HTML, JavaScript Tagged with: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*