HTML reference manual

HTML tag大全

HTML canvas font attribute

font is Canvas 2D API description when drawing text, the current font style attribute. Uses the same string values as the CSS font specification...

HTML canvas Reference Manual

Online example

Write a paragraph on the canvas 30-pixel text, using the font "Arial":

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas font attribute usage-Basic tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="15" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Basic tutorial　oldtoolbag.com",10,50);
</script>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support font attribute.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and usage

font attribute sets or returns the current font attribute of the text content on the canvas.

The syntax of the font attribute used is the same as CSS font attribute same.

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

Attribute Value

Value	Description
font-style	Specify the font style. Possible values: normal italic oblique
font-variant	Specify the font variant. Possible values: normal small-caps
font-weight	Specify the font weight. Possible values: normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	Specify the font size and line height in pixels.
font-family	Specify the font family.
caption	Use the font for title controls (such as buttons, drop-down lists, etc.).
icon	Use the font for marking icons.
menu	Use the font for the menu (drop-down lists and menu lists).
message-box	Use the font for the dialog box.
small-caption	Use the font for marking small controls.
status-bar	Use the font for the window status bar.

HTML canvas Reference Manual

HTML: <template> tag