DOM quality text on canvas.
Closer look
If you zoom in on the DOM text, you will see the following (the upper part of the canvas, the lower part of the DOM, the center hopes for the pixel size (not on the retina displays))
As you can see, there are colored sections in the lower text. This is because it was created using a method called a true type.
Note using true is an optional parameter in browsers and operating systems. If you turn off or use a device with a very low resolution, the enlarged text above will look the same (without color pixels in the lower image)
Pixels and auxiliary pixels
When you look closely at the LCD, you will see that each pixel consists of three sub pixels located in a row, one for red, green and blue. To set the pixel, you supply the RGB intensity for each color channel and set the corresponding RGB pixels. We usually accept that red is the first and blue is the last, but the reality is that it does not matter in which order the colors are, as long as they are close to each other, you will get the same result.
When you stop thinking about color and only about controlled image elements, you triple the horizontal resolution of your device. Since most texts are monochrome, you don’t have to worry too much about aligning the RGB subpixels, and you can display the text in the subpixel rather than the entire pixel, and thus get high quality text. The sub-pixels are so small that most people don't notice a slight color distortion, and this advantage is worth a bit of a dirty look.
Why there is no true type for canvas
When using auxiliary pixels, you need to have full control over each, including the alpha value. For display drivers, alpha applies to all auxiliary pixels of a pixel; you cannot have blue at alpha-0.2 and red at the same pixel at alpha-0.7. But if you know what subpixel values are under each subpixel, you can do alpha calculations instead of letting the hardware do this. This gives you sub-pixel algha control.
Unfortunately (no ... lucky for 99.99% of cases), the canvas allows transparency, but you have no way of knowing what the subelements do under the canvas, they can be of any color, and therefore you cannot do alpha calculations it was necessary to effectively use auxiliary pixels.
Subpixel home text.
But you do not need to have a transparent canvas, and if you make all your pixels opaque (alpha = 1.0), you will restore alpha control of the subpixel.
The following function draws canvas text using subpixels. It's not very fast, but it gets better text.
It works by creating text 3 times the width. Then it uses extra pixels to calculate the values of the subpixels, and when this is done, puts the subpixel data on the canvas.
Refresh . When I wrote this answer, I completely forgot about the zoom settings. The use of sub-pixel attributes corresponds to a match between the physical screen size and the DOM pixel size. If you zoomed in or out, it will not be so, and therefore finding sub-elements will be much more difficult.
I updated the demos to try to determine the zoom settings. Since there is no standard way to do this, I just used devicePixelRatio , which for FF and Chrome !== 1 when zoomed in (And since I don't have a retinal lattice, I can only guess if the bottom demo is working). If you want to see the demo correctly and you do not get a warning about scaling, although you are still zooming in, set the scale to 1.
Addistionaly, you can set the scale to 200% and use the bottom demo, since it seems that scaling significantly reduces the quality of the DOM text, and the canvas subpixel maintains high quality.
The upper text is normal. Canvas text, center (home), sub-pixel text on the canvas, and the bottom text is DOM text.
PLEASE note that if you have a Retina Display or a very high resolution display, you should view the snippet below this if you do not see a high quality canvas.
Standard demo from 1 to 1 pixel.
var createCanvas =function(w,h){ var c = document.createElement("canvas"); c.width = w; c.height = h; c.ctx = c.getContext("2d");
1 to 2 pixels.
For retina, very high resolution or enhanced 200% of browsers.
var createCanvas =function(w,h){ var c = document.createElement("canvas"); c.width = w; c.height = h; c.ctx = c.getContext("2d");
For best results.
To get the best results, you will need to use webGL. This is a relatively simple modification from standard anti-aliasing to sub-pixel anti-aliasing. An example of standard vector text rendering using webGL can be found on WebGL PDF
The WebGL API will be happy to sit besides the 2D-canvas API, and copying the result of rendering webGl content to a 2D canvas is as simple as making a context.drawImage(canvasWebGL,0,0) image context.drawImage(canvasWebGL,0,0)