From MozillaWiki
Jump to: navigation, search

Note: This page is now mostly obsolete. Antialiasing has undergone heavy changes in Mozilla 1.9.

See this Cairo mailing list thread for details. Basically, when coverage-based antialiasing is in effect, two shapes that share an edge but do not overlap will cause rendering artifacts when the edge is not aligned on pixel boundaries. This is pretty common for Web content --- e.g., two CSS block boxes are often sized and positioned to be adjacent, or an image is placed adjacent to another CSS box, etc.

The only ways to avoid this are to ensure that our layout coordinates are always pixel-aligned or to only enable coverage-based antialiasing when we draw edges that are not expected to be adjacent to other shapes.

Some (hello Owen!) advocate pixel-aligned layout but I don't think this is suitable for us for the following reasons:

  • It means that layout of a page inherently depends on device resolution; we'd like layout to be as device-independent as possible.
  • It is probably not correct according to the CSS spec, which definitely allows for fractional pixel measurements, and does not explicitly allow for rounding.
  • It will not work if the presentation is scaled or rotated.
  • It's a huge amount of work to implement in our code base.

Therefore I propose that we disable coverage-based antialiasing except when rendering the following:

  • Text glyphs
  • Rounded borders

When coverage-based antialiasing is disabled, a drawing operation should affect a pixel only if the pixel's center is in the drawn area.

Note that other forms of sampling and filtering, such as image scaling or gradient drawing algorithms, can do whatever they want; we do not expect authors to depend on the interiors of such objects being rendered in a certain way. But the edges of images and gradient fills must not be antialiased with the canvas.

We may choose to use supersampling to perform antialiasing --- i.e., render at 2x2 or 4x4 the normal resolution, then scale down by averaging pixel values. This will avoid adjacency artifacts, although it still may produce undesirable results when page elements are not aligned at pixel boundaries. We'll have to experiment.