font Property - Javascript Canvas Reference

Javascript examples for Canvas Reference:font


The font property sets or gets the font properties, which uses the same syntax as the CSS font property, for text.

font property's default value is 10px sans-serif

JavaScript syntax

context.font = "italic small-caps bold 12px arial";

Property Values

font-stylefont style. Possible values: normal italic oblique
font-variant font variant. Possible values: normal small-caps
font-weight font weight. Possible values: normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height font size and the line-height, in pixels
font-family font family
caption Use the font captioned controls (like buttons, drop-downs, etc.)
icon Use the font used to label icons
menu Use the font used in menus (drop-down menus and menu lists)
message-box Use the font used in dialog boxes
small-caption Use the font used for labeling small controls
status-barUse the fonts used in window status bar

The following code shows how to write a 30px high text on the canvas, using the font "Arial"

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


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

</script>/* w  w w  .  j  a  va2s .c  om*/


Related Tutorials