Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Text Align Tutorial

Description

To align HTML5 Canvas text, we can use the textAlign property of the canvas context, which can be set to start, end, left, center, or right. The alignment is relative to an imaginary vertical line at the x position of the text defind by fillText() or strokeText().

The text is aligned to the left when the textAlign property is set to left, when it's set to start and the document direction is ltr (left to right), or when it's set to end and the document direction is rtl (right to left).  The text is aligned to the right when the textAlign property is set to right, when it's set to end and the document direction is ltr, or when it's set to start and the document direction is rtl.  Unless otherwise specified, the textAlign property is defaulted to start.

Demo