Text and Images on Canvas
Render text strings and draw images onto the canvas.
Drawing Text
Set font: ctx.font = "bold 24px sans-serif". Draw: ctx.fillText("Hello", x, y) or ctx.strokeText("Hello", x, y). The y coordinate is the text baseline — add ascender height above it to position text correctly within a bounding box.
Text Alignment
ctx.textAlign controls horizontal alignment: "left" (default), "center", "right". ctx.textBaseline controls vertical alignment relative to y: "top", "middle", "alphabetic" (default), "bottom". For centered text: set both to "center" and "middle".
All lessons in this course
- Setting Up the Canvas and 2D Context
- Drawing Rectangles and Paths
- Text and Images on Canvas
- Animation with requestAnimationFrame