Can I turn off antialiasing on an HTML el

Question

I'm playing around with the <canvas> element, drawing lines and such.

I've noticed that my diagonal lines are antialiased. I'd prefer the jaggy look for what I'm doing - is there any way of turning this feature off?

Answer 1

Draw your 1-pixel lines on coordinates like ctx.lineTo(10.5, 10.5). Drawing a one-pixel line over the point (10, 10) means, that this 1 pixel at that position reaches from 9.5 to 10.5 which results in two lines that get drawn on the canvas.

A nice trick to not always need to add the 0.5 to the actual coordinate you want to draw over if you've got a lot of one-pixel lines, is to ctx.translate(0.5, 0.5) your whole canvas at the beginning.

Answer 2

Just two notes on StashOfCode's answer:

1. It only works for a grayscale, opaque canvas (fillRect with white then draw with black, or viceversa)
2. It may fail when lines are thin (~1px line width)

It's better to do this instead:

Stroke and fill with #FFFFFF, then do this:

imageData.data[i] = (imageData.data[i] >> 7) * 0xFF

That solves it for lines with 1px width.

Other than that, StashOfCode's solution is perfect because it doesn't require to write your own rasterization functions (think not only lines but beziers, circular arcs, filled polygons with holes, etc...)

Answer 3

I want to add that I had trouble when downsizing an image and drawing on canvas, it was still using smoothing, even though it wasn't using when upscaling.

I solved using this:

function setpixelated(context){
    context['imageSmoothingEnabled'] = false;       /* standard */
    context['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context['oImageSmoothingEnabled'] = false;      /* Opera */
    context['webkitImageSmoothingEnabled'] = false; /* Safari */
    context['msImageSmoothingEnabled'] = false;     /* IE */
}

You can use this function like this:

var canvas = document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))

Maybe this is useful for someone.

Answer 4

ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;

With this combo I can draw nice 1px thin lines.

Answer 5

It can be done in Mozilla Firefox. Add this to your code:

contextXYZ.mozImageSmoothingEnabled = false;

In Opera it's currently a feature request, but hopefully it will be added soon.

Answer 6

Notice a very limited trick. If you want to create a 2 colors image, you may draw any shape you want with color #010101 on a background with color #000000. Once this is done, you may test each pixel in the imageData.data[] and set to 0xFF whatever value is not 0x00 :

imageData = context2d.getImageData (0, 0, g.width, g.height);
for (i = 0; i != imageData.data.length; i ++) {
    if (imageData.data[i] != 0x00)
        imageData.data[i] = 0xFF;
}
context2d.putImageData (imageData, 0, 0);

The result will be a non-antialiased black & white picture. This will not be perfect, since some antialiasing will take place, but this antialiasing will be very limited, the color of the shape being very much like the color of the background.