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 Font, Size, and Style Tutorial

Description

To draw text using HTML5 Canvas, we can use the font property and the fillText() method of the canvas context.

To set the font, size, and style of HTML5 Canvas text, we can set the font property of the canvas context to a string containing the font style, size, and family, delimited by spaces.  The style can be normal, italic, or bold.  unless otherwise specified, the font style is defaulted to normal.

Once the font property has been set, we can draw the text with the fillText() method, which requires a string and an x and y position.

Demo