Jun 20, 2015

Pecan, A Tool for Scaling Pixel Art In-browser

Download: pecan.min.js pecan.js
Support: github @smketterer

Pecan is a tiny tool that turns HTML image elements into canvases with the same ids, classes, and dimensions. It was designed to make it easier for pixel artists to get proper image scaling without manually upsizing their images.

<!--Required, include this once:-->
<script src="pecan.min.js"></script>

<!--To scale an image:-->
<img src="pixels.png" width="270px" height="270px"
onload="pecan(this)">

Examples:

With Pecan.
Without Pecan.

It works in the same way for animated GIFs, with a few caveats. Since it uses an XMLHttpRequest to get the raw image data, GIFs you want to scale have to be on the same domain (and port and protocol) as the page. If you use an external image host this may not work for you, and you'll be stuck with the Pink Box of Death.

Secondly, GIFs can only be scaled by width, unlike other image formats with which you can change the aspect ratios. This is again due to the differences in dealing with the raw image data.

Thirdly, doing this on a large GIF will likely blow up your computer.

With Pecan.
Without Pecan.

Animation by Tyriq Plummer.