Scaling Sprites for Pixel Art with HTML5 Canvas

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

Pixel art is classically created a very low resolution and scaled up to display. This creates the classic "pixel artwork" look of images.

Since scaling up the images can be done dynamically the images are normally stored as small sprites and then scaled to the correct size when required.

Here I am loading a sprite and scaling it up using browser CSS on the canvas.

Example code and full tutorial

The full code is available by viewing the source of the below frame. If you want more detailed instructions there is my blog post I talk through the code step by step.