Magnifying Glass

I wanted a magnifying glass effect for my articles on pixel art scaling (parts one and two), to show the difference between various algorithms.

There are a few jQuery plugins that do this, but I didn’t want to add external dependencies, and this was a good excuse to play with the canvas element.

I tried using drawImage to upscale part of the image, but browsers seemed to apply bilinear or bicubic interpolation by default, which resulted in a blurry mess. Not all browsers supported the imageSmoothingEnabled property at the time of writing, so I ended up implementing nearest-neighbor interpolation by hand.

Zoomable image

Try dragging and dropping your own image file in there.

Check out the code:

Posted on by Daniel Perez Alvarez. Got any comments or suggestions? Send me a tweet or an email.