Does Canvas do different antialiasing between browsers?

Question

I am writing a javascript/canvas script that generates an image. I am experiencing radically different behaviour between browsers and I can't seem to understand why it happens or how to avoid it.

My code is essentially a version of this, assuming that X and Y contains the coordinates of the lines:

//this section of code is repeated a large number of times. 

CTX.strokeStyle = 'rgba(0,0,0,0.05)';
CTX.lineWidth = 1 ;


for(var i = 0;i<NUM;i++){
  for(var j = 0;j<NUM,j++){

    if (!F[i*NUM+j]){
      // i and j are not friends
      // and should not have a line between them
      continue;
    }

    var ax = X[i];
    var ay = Y[i];
    var bx = X[j];
    var by = Y[j];

    CTX.beginPath();
    CTX.moveTo(ax,ay);
    CTX.lineTo(bx,by);
    //CTX.closePath(); // not needed. but removing does not fix problem.
    CTX.stroke();
  }
}

Note that the lines are tightly overlapping, which is why I set the alpha value so low. The image is supposed to be gradually exposed.

Here is an image that displays the behaviour:

Left: part of an image from firefox. Right: part of an image from chromium

The left example is the desired behaviour.

My assumption is that this has something to do with the antialising in the two browsers, but I can't find anywhere where this behaviour is discussed. I only find examples of people stating that you should round your coordinates to whole numbers if you want "pixel graphics", but that is a somewhat different matter. '

Questions:

Do you know why this happens?
Can I somehow avoid it?

Update

Here is a permanent link to the code as it is now: https://bitbucket.org/inconvergent/orbitals_js/src/30f33d11461f4b307fe4a09048bd1b3af4960d31/index.htm
I had written chrome. Turns out I was actually using chromium when i had this problem. on ubuntu 13.10. Will test in chrome on my machine and post back.

[this](http://jsbin.com/soziboqi/1/edit) (your code) output this for me : http://i.imgur.com/3zZsxD0.png on `Google Chrome 33.0.1750.146 (Official Build 254388) m` Windows 7 — rlemon, Mar 17 '14 at 23:52
I edited my question. Turns out I was actually using chromium. I will test it in chrome on my machine. thanks for testing! — inconvergent, Mar 18 '14 at 08:03

score 1 · Answer 1 · edited May 23 '17 at 12:06

Canvas is a mess, but some solutions are out there:

Pixel manipulation

To allow for sub-pixel drawings, all browser implementations of canvas employ anti-aliasing (although this does not seem to be a requirement in the HTML5 spec). Anti-aliasing can be important to keep in mind if you want to draw crisp lines and notice the result looks blurred. To work around this you will need to either round to integer values or offset by half a pixel depending on if you’re drawing fills or strokes.
Double buffering
Sub-pixel rendering
createPattern


FWIW, there is a workaround to get anti-aliased clipped edges for drawing an image to a canvas.

Instead of this:

ctx.beginPath();
(draw a fancy path)
ctx.clip();
ctx.drawImage(myImage, ...);

Do this:

ctx.fillStyle = ctx.createPattern(image);
ctx.beginPath();
(draw a fancy path)

References

Does Canvas do different antialiasing between browsers?

1 Answers1