font Property - Javascript Canvas Reference

Javascript examples for Canvas Reference:font

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. font

Description

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

ValuesDescription
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>
<html>
<body>

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

<script>

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*/

</body>
</html>

Related Tutorials