HTML5 Tutorial

HTML5 Forms

Write a 30px high "Hello World" on the canvas, using the font "Arial":

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

The font attribute allows you to specify font properties of the text written on the canvas.

The font attribute uses the same syntax as the CSS font property.

Default value:	10px sans-serif
JavaScript syntax:	context.font="italic small-caps bold 12px arial";

The font attribute is supported in all major browsers.

Values	Description	Play it
font-style	Specifies the font style	Play it »
font-variant	Specifies the font variant	Play it »
font-weight	Specifies the font weight	Play it »
font-size/line-height	Specifies the font size and the line-height	Play it »
font-family	Specifies the font family	Play it »
caption	Uses the font that are used by captioned controls (like buttons, drop-downs, etc.)	Play it »
icon	Uses the font that are used by icon labels	Play it »
menu	Uses the fonts that are used by dropdown menus	Play it »
message-box	Uses the fonts that are used by dialog boxes	Play it »
small-caption	A smaller version of the caption font	Play it »
status-bar	Uses the fonts that are used by the status bar	Play it »

WEB BUILDING
Download XML Editor
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER

W3SCHOOLS EXAMS
Get Certified in: HTML, CSS, JavaScript, XML, PHP, and ASP

W3SCHOOLS BOOKS
New Books: HTML, CSS JavaScript, and Ajax

STATISTICS
Browser Statistics Browser OS Browser Display

SHARE THIS PAGE
Share with »