Nearest Neighbor rendering in Canvas

Question

I have a sprite that animates using a sprite sheet. He is only 16x16, but I want to scale him up to around 64x64 in all its pixel-y goodness!

The results are terrible, of course the browser is anti aliasing it. :/

Thanks!

EDIT: No css needed, here is my draw function.

function drawSprite(offsetx:number,offsety:number,posx:number,posy:number){
    ctx.drawImage(img, offsetx*32, offsety*32, 32, 16, posx*32, posy*8, 128, 32);
}

See it kinda working here (codepen)

Paola

See also my answer to this question which shows how to use JavaScript + Canvas to use nearest-neighbor on every browser. – Ineptitude

The answer linked in the above comment is much more complete – Ciborium

Answer 1

In case someone ever stumbles upon this again (like me), Webkit supports a -webkit-optimize-contrast value for image-rendering, which (currently) is an implementation of the nearest neighbor upscaling. It can be applied to both images and canvases.

Here's an example of how it goes.

.nn128 {
    width: 128px;
    height: 128px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

<canvas class="nn128" width="16" height="16"></canvas>
<img src="path/to/small/image.png" alt="Small image" class="nn128">

With this setup, both WebkitSafari and Gecko/Firefox will enlarge the 16x16 canvas space and the small image to 128x128 with the nearest neighbor algorithm.

UPDATE The answer initially stated that Webkit browsers supported this; in fact, as of 2011-12-24, it works with Safari on Mac OS and Chrome on Mac OS, but not with Chrome one Windows (Safari on Windows was not verified), as stated on Issue 106662 of the Chromium bug tracker. Lexically, Chrome on Windows will accept the -webkit-optimize-contrast value in a CSS style sheet, but it won't have any effect. It is my expectation that it will work someday, and this method will be the right way to get nearest neighbor upscaling, but for now, using this method means Windows Chrome users will have to live with the blurriness.

Peace

Is there any way you could provide a sample? I know it is pretty straight forward...but i would still really appreciate it. – Paola

This doesn't seem to work as of september 30th 2011. I'm using Chrome 14.0 and -webkit-optimize-contrast apparently does nothing to change the way images are interpolated. It does accept the value for image-rendering so there must be some level of support; maybe it's broken? – Ursola

@namuol, it exists in the latest revisions of the WebKit; I must admit that I don't recall checking. It works with Safari 5 at least, and I'm somewhat surprised that it didn't make it to Chrome yet. – Peace

It' still not in Chrome beta. WebKit Inspector does not complain about it, so it seems it knows the property value -webkit-optimize-contrast, but it has no effect whatsoever. It works fine in WebKit nightlies though. – Rozalie

@rFactor, there is a bug report on chromium about this–I'll add it to the answer, since it's a rather long-standing issue. – Peace

As of today this works in Chrome v17 on OS X but not on Safari v5.1.2 on OS X. – Ineptitude

Answer 2

In Firefox you can use this:

canvas {
  image-rendering: -moz-crisp-edges;
}

But as far as I know for every other browser you are pretty much out of luck. One way around this perhaps is to scale up your sprite to 64x64 in Photoshop (or whatever), then use it scaled down in canvas. This way at least the image will not get blurry when "scaled up". It still won't exactly give you the pure mode7 like goodness of nearest neighbor though.

You could write your own scaling code using the imageData object. You will be incurring a significant performance penalty in doing so, but for a 16x16 image, it might not be that significant.

Spoilsman

i wish opera or safari had an image-rendering option for nearest neighbor. :/ Thanks! – Paola

This no longer seems to work in firefox; see this fiddle in the latest version as a test: jsfiddle.net/gingerbeardman/XQkXy – Ursola