javascriptgoogle-chromecanvas

Sub-pixel rendering in Chrome Canvas

I'm wondering if anyone knows if it's possible to enable sub-pixel rendering in an HTML5 canvas in Chrome (and/or Safari).

Chrome does sub-pixel rendering in HTML, and FF does it for both HTML & Canvas rendering. Specific issue pictured below:

Screenshot

Solution

  • Short answer: No. Not possible

    This is one of two topics that frustrates a lot of Canvas users.

    Subpixel rendering/anti-aliasing of any kind is up to the browser. This means that different browsers are prone to render things in different ways.

    A lot of people have asked for anti-aliasing to be an option that can be turned on or off for a specific context. No luck of anything like that yet.

    Chrome in particular you'll need to keep an eye on, because the way they have handled sub-pixel rendering has changed drastically over the past 4 months. If you start using the Chrome developer channel you'll get a preview of the things they keep trying out. They've been doing quite a bit of testing in this area, and have even pushed some drastic regressive changes that I've complained about.

    The takeaway here is that:

    1. Chrome is most definitely "not done yet" with regards to subpixel rendering. It sucks to say, but your best option for now is to wait a while.
    2. The spec needs to be a lot more specific in this area so there is some consistency across browsers, because any subpixel rendering/anti-aliasing at all right now is very browser-dependent. There was unresolved discussion of it back in 2008. I'm not away of any progress since.