Images in web browser are slightly blurred. How to

Question

I'm making a game. Collisions in this game are based on color of pixel on canvas. I get color pixel and if it is for example red, player can't move. Unfortunately in firefox images are remotely blurred. Pixels are fluently changed from white color to red. But I don't want that. Any ideas how to answer to this problem?

Answer 1

This is called anti-aliasing and is a result of interpolating the image when re-sized (or sub-pixeling shapes, text and so forth). It's something the browser do internally.

You can however turn off this in more recent version of the browser.

Here is a test I made to see if this works in your browser and the difference between the modes (as in the picture below) - the bottom version should not be smoothed:

ONLINE TEST

Add this snippet to your CSS style sheet (may or may not work depending on browser):

canvas {
    image-rendering: optimizeSpeed;             // Older versions of FF
    image-rendering: -moz-crisp-edges;          // FF 6.0+
    image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
    image-rendering: crisp-edges;               // Possible future browsers.
    -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

Update: The current form of the standard (with status "not ready for implementation") specify crisp-edges and not optimize-contrast as possible future standard. CSS class above is updated with this to reflect this for the non-prefixed value.
- end update -

For webkit browsers you can disable image smoothing for the canvas element like this:

context.webkitImageSmoothingEnabled = false;

and for Mozilla:

context.mozImageSmoothingEnabled = false;

(when this latter is available the CSS class is not necessary unless you scale the element itself which in any case should be avoided).