Rendering text


show more Rendering text provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas show less
please wait ...

Rendering text

One of the interesting things about canvas is that in addition to drawing shapes and curves and paths and so on, you can also draw text directly onto the canvas using a variety of text-drawing settings. In fact, drawing text is very similar to drawing any other paths. You can stroke them. You can fill them using the same fillStyle and strokeStyle as you would for other path operations and other shape operations. It's important to note that when you draw text on the canvas, it is not affected by any kind of CSS box model; it's just a path, and it's drawn using the canvas rules, not any CSS rules that you may have defined elsewhere in your document.

And it's also important to note that you shouldn't use text on the canvas as a replacement for regular document text, because that makes accessibility really, really hard. In fact, screen readers won't be able to read the text that you draw on the canvas. So if you have any grand ideas about using canvas to replace heading...

Rendering text
Video duration: 9m 18s 3h 7m Intermediate

Viewers:

Rendering text provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas

Subjects:
Developer Web
Software:
HTML
Author:
please wait ...