Scaling Sprites for Pixel Art with HTML5 Canvas

In this blog post, I am showing a simple way of scaling sprites for Pixel Art using the HTML5 canvas.

Why we scale up sprites rather than rendering them higher quality

When displaying pixel art it is originally drawn pixel by pixel at a very low resolution and then scaled up from original artwork. During the scaling process the nearest-neighbour algorithm is used and this creates the crisp lines pixel artwork is characterized for.

By storing them in the original format and scaled up there are file size savings and can mean the artwork is very small and fast to load. By doing this there are various performance and memory bonuses.

Scaling sprites with our canvas

Before any scaling is performed I will set up my canvas as before below.

<canvas id="mainCanvas" width="96" height="96"></canvas>

The important bit here is that I have specified my canvas is 96 by 96 pixels. Below is the sprite I am going to be scaling up, Charizard from Pokemon, which is 96 by 96 pixels.

In my JavaScript first I create the 2d context so I can draw to  the canvas like before.

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

Once the canvas is available I create a new image to load.  The onload function is set up to draw image as soon as it has loaded. Once I have set up the onload handler I then tell it to load the PNG file.

var charizardImg = new Image();
charizardImg.onload = function() {
 context.drawImage(charizardImg, 0, 0)
};
charizardImg.src = "charizard.png";

With this code we will load the load the image onto the canvas. Now we need to configure the scaling to create our larger sprites.

<style>
    #mainCanvas {
        width: 384px;
        height: 384px;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-crisp-edges;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
    }
</style>

Using the simple CSS above I have first configured the canvas to be four times the size of the image. By default this will perform standard scaling and blur our sprites.

To get around the standard scaling we can use the image-rendering css property. For complete browser compatability we give numerous different properties as suggested on the Mozilla Developer Network.

This tells the browser that instead of scaling it using the standard scaling algorithm, that it should use one that suits our sprites. This achieves the scaling we need for our pixel art without blurring the lines.

The disadvantage of this is that at the moment this is not supported by IE 11 and Edge.

Conclusions on measuring text with measureText

Using this technique we are allowing the browser to scale up the canvas to increase the size of our sprites. This keeps the image size down for both performance and ease of working with the sprites.

The example including the source code is available on my website.

If you have any questions or wish to learn more leave a comment below and I will endeavour to answer any questions.