Tutorials
Basics
Advanced
KineticJS
Three.js
HTML5 Canvas
Canvas Element
Lines
Line
Line Width
Line Color
Line Cap
Curves
Arc
Quadratic Curve
Bezier Curve
Paths
Path
Line Join
Rounded Corners
Shapes
Custom Shape
Rectangle
Circle
Semicircle
Fill Styles
Color Fill
Linear Gradient
Radial Gradient
Pattern
Images
Draw Image
Image Size
Image Crop
Image Loader
Text
Font, Size & Style
Text Color
Text Stroke
Text Align
Text Baseline
Text Metrics
Text Wrap

HTML5 Canvas Text Baseline Tutorial

To vertically align text with HTML5 Canvas, we can use the textBaseline property of the canvas context. textBaseline can be set with one of the following values: top, hanging, middle, alphabetic, ideographic, and bottom. Unless otherwise specified, the textBaseline property is defaulted to alphabetic.

Open in new window

Code Editor

< Text Align Text Metrics >

More Examples

HTML5 Canvas Text Align Tutorial
HTML5 Canvas Text Color Tutorial
HTML5 Canvas Text Wrap Tutorial
HTML5 Canvas Text Metrics Tutorial
HTML5 Canvas Text Along Arc Path

Modified on April 9th, 2013 by Eric Rowell