Search code examples
javascripthtmlcanvas

Antialiasing when drawing lines in Canvas in Firefox

I'm trying to draw a diagram with canvas and want to get crisp lines, not anti-aliased. I know about the 0.5 offset you need to use to make lines fall exactly on screen pixels, but even with that I get anti-aliased lines in Firefox, while both Chrome and IE render it fine.

Here's some example code:

JS:

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;

ctx.translate(-0.5, -0.5); //To get crisp lines
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
for (var x = 20; x < 100; x += 20){
    ctx.moveTo(x, 20);
    ctx.lineTo(x,100);
    ctx.stroke();
}

See JsFiddle: http://jsfiddle.net/einaregilsson/9yrF6/8/

This is what it looks like in Chrome and IE:

Chrome rendered lines

This is what it looks like in Firefox:

Firefox rendered lines

This is Firefox 26 on Windows 7. I've tried turning off hardware acceleration, which someone suggested but that makes no difference. Any ideas how I can get crisp lines on Firefox?

Also, is there anyone on Firefox that doesn't get anti-aliased lines when they look at the Fiddle? I'm wondering if this is a general Firefox issue, or particular to my setup.

Solution

  • It looks like you're slightly zoomed-in on Firefox (notice how the lines are spaced slightly further apart)

    Hit Ctrl+0 to reset the zoom level. This should fix your problem.