HTML5 Canvas Tutorials - Setting the text size and font

Specifying font for text on canvas

Now that you know how to display text on a canvas, let's see how to use different fonts for the text. Before you display the text using the fillText() or strokeText() method, use the font attribute to specify the size and type of font you would like.

font = "fontSize fontName";

The font size is followed by 'px' to show that the size is in pixels.
For a list of font names, click here.

For eg:
font="15px verdana";

Feel free to experiment with different font sizes and font names in the following code.

HTML Code

<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");

// Specify the font size and font name
ctx.font = "15px verdana";

// Display the text at the specified location. In this case (5,20)
ctx.strokeText("Believe", 5,20);
}
}
</script>
<title>How to specify font for text on a canvas</title>
</head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>

Try Code