Join Joe Marini for an in-depth discussion in this video Drawing text, part of Learning HTML Canvas.
- [Instructor] 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 functions.…In fact, drawing text is very similar…to drawing any other paths.…You can stroke and fill text…using the same fillStyle and strokeStyle…as you would for other path and shape operations.…So it's important to note that…when you draw text on the canvas,…it is not affected by any kind of CSS rules in the page.…It's just a path, and it's drawn…using the current canvas settings.…
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 have any grand ideas about using canvas…to replace headings like h1s or h2s,…yeah, it sounds like a great idea,…but you should probably find another way to do that,…because accessibility-wise, that's just not going to work…
- Canvas examples
- Drawing shapes, arcs, paths, and curves
- Drawing text
- Drawing shadows, patterns, and gradients
- Using clipping paths
- Displaying images and video
- Transforming objects with scaling and rotation
- Manipulating raw pixels
- Applying transitions
- Creating animations
Skill Level Intermediate
1. Overview of Canvas
2. Basic Canvas Drawing Techniques
3. Complex Canvas Drawing
4. Advanced Drawing APIs
5. Practical Examples
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.