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!

alt text

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)

See also my answer to [this question](http://stackoverflow.com/questions/4875850/how-to-create-a-pixelized-svg-image-from-a-bitmap/4879849) which shows how to use JavaScript + Canvas to use nearest-neighbor on every browser. — Phrogz, Jan 17 '12 at 02:51
The answer linked in the above comment is much more complete — sfridman, Jun 04 '15 at 16:43

zneak · Accepted Answer · 2011-12-24T20:50:32.683

9

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 ~~Webkit~~Safari 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.

edited Dec 24 '11 at 20:50

answered Aug 24 '11 at 06:21

zneak

134,922
42
253
328

Is there any way you could provide a sample? I know it is pretty straight forward...but i would still really appreciate it. – DevEarley Aug 25 '11 at 20:38
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? – namuol Sep 30 '11 at 21:58
@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. – zneak Sep 30 '11 at 21:59
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. – Tower Dec 24 '11 at 13:16
@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. – zneak Dec 24 '11 at 20:40
As of today this works in Chrome v17 on OS X but _not_ on Safari v5.1.2 on OS X. – Phrogz Jan 17 '12 at 02:50

MooGoo · Answer 2 · 2010-07-22T02:09:04.077

1

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.

edited Jul 22 '10 at 02:09

answered Jul 22 '10 at 01:51

MooGoo

46,796
4
39
32

i wish opera or safari had an image-rendering option for nearest neighbor. :/ Thanks! – DevEarley Jul 22 '10 at 16:37
This no longer seems to work in firefox; see this fiddle in the latest version as a test: http://jsfiddle.net/gingerbeardman/XQkXy/ – namuol Sep 30 '11 at 22:26

Nearest Neighbor rendering in Canvas

2 Answers2