Sub-pixel rendering in Chrome Canvas

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.

I don't believe this is possible presently.

It's a hard problem because canvas provides so much low-level control to the user. If canvas starts doing intelligent things like this, it may break some other functionality the user was expecting.

Consider the subpixel rendering for other graphical elements - depending on the application, the programmer may not want that, and you certainly wouldn't want subpixel rendering turned on arbitrarily for the whole element as an all-or-nothing proposition. Imagine getting the color of a specific pixel - what's the right answer here? Should canvas lie and return the expected color, or return the actual color (so we have to answer questions all day here on SO about "why is this pixel I made black being measured as dark red?").

There are some who would argue that Firefox is doing the wrong thing here.

Here's a way of doing sub-pixel rendering for any canvas content (text, images, vectors, etc). http://johnvalentine.co.uk/subpixel-html5-canvas.htm.

Outline of the method

It draws onto a canvas, which is then drawn to the screen to take advantage of RGB-striped subpixels. It works with alpha channels too. Note that this might not work if you are using a portrait display, non-striped pixels, or if your browser displays canvases at a lower resolution than your display.

There's scope for fine-tuning, but it's a big gain for a simple method. It works on all browsers I've tested, but only where canvas-to-screen pixel ratio is 1:1 (but I believe solutions have been offered for that).