Canvas Image Smoothing

What is

ctx.mozImageSmoothingEnabled = false;

for webkit(or other browsers)? I need it to remove anti-aliasing because i am trying to get a pixelized effect to an image. With anti-aliasing, it looks bad-quality but with no sharp ed开发者_StackOverflow社区ges.

For the <canvas> tag, WebKit nightlies after r117635 and Chrome Canary 21.0.1154.0 now have a webkitImageSmoothingEnabled attribute. (Note that this applies only to <canvas>, not to HTML elements more generally.)

If you want to draw shape without smooth edges try to use half pixels on coordinates.

Imagine each pixel as a large square. The whole-number coordinates (0, 1, 2…) are the edges of the squares. If you draw a one-unit-wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line's direction.

For example, if you try to draw a line from (1, 0) to (1, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1. The screen can’t display half a pixel, so it expands the line to cover a total of two pixels:

But, if you try to draw a line from (1.5, 0) to (1.5, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1.5, which results in a true 1-pixel-wide line:

Source: http://diveintohtml5.info/canvas.html

AFAIK no way yet. You might get the same effect drawing what you want pixel-by-pixel, but with more work (hey, not that much if it's something like lines).

A quick look at the link reported by Stephan below shows the following update to this issue on the bug tracker:

The proposed value for CSS3's image-rendering 'optimize-contrast' has been implemented as '-webkit-optimize-contrast' in bug 56627. Right now in WebKit, using this will get you nearest-neighbour interpolation.

So the CSS setting -webkit-optimize-contrast looks to be the answer.

There is a (almost one year old) bug report in webkit about this. One other possiblity would be to create your pixel art in higher resolutions and scale them down. This would probably yield better results than upsizing, but would be combined with higher traffic demands.

Round your X and Y before showing your images on screen.

If you draw images on sub-pixels some browsers will try to anti-alias it before showing the image.

The faster way to do it is a binary OR with zero.

myObject.X = myObject.X | 0;

For a deeper explanation, take a read at this article:

http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/

And here is a jsperf test on rounding methods:

http://jsperf.com/math-floor-vs-math-round-vs-parseint/5