Why is Canvas so slow for Text?

During the launch of IE9 I was asked to produce a HTML5 application that animated stitching tweets on to a canvas. During testing the application I had some really complex animations and they performed just fine, but when I added test using Text API the canvas performance was awful. I tested all the major browsers and in each one it was equally awful. That's when I learnt an important lesson about Canvas… the text API is rubbish.

Not only is it slow, but by adding text to Canvas you rasterize it and so if a user zooms in the text will appear pixelated. Also anything that's added to the canvas is no longer accessible, so screen readers and alike won’t recognise it.

The reason that canvas isn’t good for text is because it was never really designed for the purpose of displaying text. The solution is to use something that was designed for text… the regular DOM.

By adding regular DOM elements like the P tag, you can write text and then layer it over your canvas.

Grant Skinner talked about this approach in his talk at the NewGameConference. He also shows how you can use the library easelJS to synchronise the movement of elements on canvas and the textual DOM elements. If you like to learn more about this technique check out this video.

Comments (0)

Skip to main content