26

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 edges.

NebNeb
  • 339
  • 1
  • 4
  • 10
  • 4
    You know, with pixel-art jagged is good, and smooth is bad. I'm looking for the same issue, and have not found webkit equivalents. – Omiod Jan 07 '11 at 11:39
  • 3
    ```ctx.webkitImageSmoothingEnabled=false``` works now in Chrome 22 – forresto Sep 26 '12 at 12:47

6 Answers6

9

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.)

Stephen White
  • 91
  • 1
  • 1
  • Actually, you want to apply this to the 2D context of the canvas, not the canvas element itself. `var ctx = canvas.getContext('2d'); ctx.webkitImageSmoothingEnabled = false;` or `ctx.mozImageSmoothingEnabled = false;` – Fritzy Jul 31 '12 at 21:35
  • @Fritzy - this doesn't do anything in Chrome 21 – UpTheCreek Aug 22 '12 at 08:28
  • Still doesn't do anything for me in v27 (windows) – UpTheCreek May 27 '13 at 11:14
3

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:

enter image description here

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:

enter image description here

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

Olim Saidov
  • 2,796
  • 1
  • 25
  • 32
2

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).

Camilo Martin
  • 37,236
  • 20
  • 111
  • 154
2

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.

Stephan Klein
  • 1,177
  • 11
  • 20
douglett
  • 29
  • 3
1

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.

Stephan Klein
  • 1,177
  • 11
  • 20
1

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

v42
  • 1,415
  • 14
  • 23
  • 2
    Seems `myObject.X = myObject.X >> 0` Is a little faster. Note that both of these will act like `Math.floor`, not `Math.round` – UpTheCreek Aug 22 '12 at 08:37
  • @UpTheCreek The absolute fastest: `myObject.X = ~~myObject.X`. [See the jsperf](http://jsperf.com/math-floor-vs-math-round-vs-parseint/110). – rvighne Jan 28 '14 at 21:54
  • 1
    @rvighne: not on my machine with win7 chrome v32 apparently: *±0.23% 0.27% slower* – UpTheCreek Jan 29 '14 at 15:15
  • @UpTheCreek Huh, interesting (I saw your results in the BrowserScope). Also interesting is that `Math.floor` is consistently faster than `| 0`. This shakes everything I thought I knew about rounding hacks... – rvighne Jan 30 '14 at 02:46