Pixel art scaling in JavaScript


While reading about canvas pixel manipulation I wondered if anyone had ported pixel scaling algorithms to JavaScript. You may have heard of Eagle, 2xSaI, or hqx which are employed by console emulators (e.g. ZSNES). The scaling algorithms are designed to make low resolution graphics look appealing on modern high resolution displays without introducing jaggy artifacts. Wikipedia has a great section explaining pixel art scalers.

A couple years ago, the source of the hqx series of scaling algorithms was put into the public domain. Dominic Szablewski ported the code to JavaScript for use with his Impact HTML5 game engine. You can get the js-hqx source from GitHub and view it in action as part of his Biolab Disaster game. The performance impact is negligible since all of the sprites get scaled once at the beginning of game instead of scaling every frame.

Aside: While researching this I rediscovered the Microsoft research paper from last summer where they developed an algorithm for turning pixel art into vector art.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.