Subpixel Smoothed Text in HTML5 Canvas Element

Question

I'm a little confused about how the text of the canvas element smooths the text and hope you all can help.

In the following screenshot, the top “Quick Brown Fox” is an H1 element, and the bottom is a canvas element with the text displayed on it. Below you can see that both "F" are located side by side and enlarged. Note that the H1 element blends better with the background:

Here is the code I'm using to render canvas text:

var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = 'black'; ctx.font = '26px Arial'; ctx.fillText('Quick Brown Fox', 0, 26); } 

Is it possible to make the text on the canvas so that it looks identical to the H1 element? And why are they different?

Answer 1

Answering my own question:

You can use the method demonstrated on this site:

https://bel.fi/alankila/lcd/

The only problem is that it is too slow to implement in a production application. If someone is running faster, please let me know.

Answer 2

Now you can get subpixel font rendering by creating an opaque canvas context. In Safari and Chrome, you can get this with this snippet:

var ctx = canvas.getContext("2d", {alpha: false})

I found this from this post.

Answer 3

Matt, I sat with the (same / similar) problem last week, which, in my case, turned out to be due to differences in pixel density on the devices I tested; I wrote about it tonight - http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

The news link is dead, so here is the gist with the source code: https://gist.github.com/joubertnel/870190

And the fragment itself:

  // Output to Canvas without consideration of device pixel ratio var naiveContext = $('#naive')[0].getContext('2d'); naiveContext.font = '16px Palatino'; naiveContext.fillText('Rothko is classified as an abstract expressionist.', 10, 20); // Output to Canvas, taking into account devices such as iPhone 4 with Retina Display var hidefCanvas = $('#hidef')[0]; var hidefContext = hidefCanvas.getContext('2d'); if (window.devicePixelRatio) { var hidefCanvasWidth = $(hidefCanvas).attr('width'); var hidefCanvasHeight = $(hidefCanvas).attr('height'); var hidefCanvasCssWidth = hidefCanvasWidth; var hidefCanvasCssHeight = hidefCanvasHeight; $(hidefCanvas).attr('width', hidefCanvasWidth * window.devicePixelRatio); $(hidefCanvas).attr('height', hidefCanvasHeight * window.devicePixelRatio); $(hidefCanvas).css('width', hidefCanvasCssWidth); $(hidefCanvas).css('height', hidefCanvasCssHeight); hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio); } hidefContext.font = "16px Palantino"; hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20); 

Answer 4

Here's a way to do subpixel rendering for any canvas content (text, images, vectors, etc.). http://johnvalentine.co.uk/archive.php?art=tft .

Method outline

He pulls on the canvas, which then reaches for the screen to use the RGB-striped subpixels. It also works with alpha channels. Please note that this may not work if you are using a portrait display, not striped pixels, or if your browser displays canvases with lower resolution than your display.

There is the possibility of fine tuning, but this is a big win for a simple method.

Answer 5

This is commonly called sub-pixel anti-aliasing or ClearType on Windows. I don't know any OS / browser combinations that currently support this for Canvas.

I would be interested to see some tests using subpixel offsets for text, to see if any browsers can use pixel hints to render fonts (like aligning ascending lines at pixel borders). My guess will not be.

Edit : my guess was wrong; it looks like Safari, Chrome, and Firefox are using some pixel fonts. Safari and Chrome appear the same way, snapping to the borders of the entire pixel, but different from Firefox (snapping to borders with half a pixel?). See visual test results (on OS X) here: http://phrogz.net/tmp/canvas_text_subpixel.html