Nearest-neighbour resizing for Pixelart

[Antylum]

During creating a pixelart game, i found that it would be better to use small-size images and scale them up depending on player's screen resolution. But there were smoothed and blurry: (small image - original size, 2 - resized by canvas, 3 - resized in graphicsGale - original size)

 

 

I tried different methods to use nearest-neighbour algorithm to make images sharp. Finally, i made it with:  

 bufcontext.webkitImageSmoothingEnabled = false; bufcontext.mozImageSmoothingEnabled = false;

 

 

But it doesn't work in IE and Opera. What kind of method can cover all(5) browsers? 

Also tried this for canvas, but it doesn't help:

#canvas {    image-rendering: optimizeSpeed;                 image-rendering: -moz-crisp-edges;              image-rendering: -webkit-optimize-contrast;     image-rendering: -o-crisp-edges;                image-rendering: optimize-contrast;             -ms-interpolation-mode: nearest-neighbor;   }

 

[rich]

context['imageSmoothingEnabled'] = value;

context['mozImageSmoothingEnabled'] = value;

context['oImageSmoothingEnabled'] = value;

context['webkitImageSmoothingEnabled'] = value;

context['msImageSmoothingEnabled'] = value;

[dhaber]

I've had good luck with the style suggested by Rich.    There is one thing that confused me about this at first.   In some browsers, if you reset the size of the canvas through the height or width properties, these settings will reset to their default.   I never checked the spec to see if that is expected, but as long as you take it into account, this works well.

[lean8086]

I think it could help: http://seb.ly/2011/02/html5-canvas-sprite-optimisation/

[Antylum]

Rich, i have tried oImageSmoothingEnabled and msImageSmoothingEnabled(tried in IE9) and they don't work - I think, the specification haven't been supported by Opera and IE yet.

 

I thought about approach to scale pixelart during game loading and initialization, using getImageData && putImageData, so you create new image depending on player's screen resolution. Pros is that you write nearest-neigbour algorithm, which scales correct without smoothing(or how you have written it). Cons is that can take a while, cause put/getImageData are slow and if your game has many images.

Luckily, i found a good article about this approach and much more. I recommend it to all:

    http://phoboslab.org/log/2012/09/drawing-pixels-is-hard

 

P.S. Rich, how is made pixelart graphics scaling for mobile devices(retina Ipads, Android) in Nutmeg?

[sima]

context['imageSmoothingEnabled'] = value;context['mozImageSmoothingEnabled'] = value;context['oImageSmoothingEnabled'] = value;context['webkitImageSmoothingEnabled'] = value;context['msImageSmoothingEnabled'] = value;

 

Thanks alot! I was looking for a way to manipulate smoothing and this one worked perfectly