HTML5 Canvas Cookbook

Working with text

Almost all applications require some sort of text to effectively communicate something to the user. This recipe will show you how to draw a simple text string with an optimistic welcoming.

How to do it...

Follow these steps to write text on the canvas:

1. Define a 2D canvas context and set the text style:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");
       
       context.font = "40pt Calibri";
       context.fillStyle = "black";

2. Horizontally and vertically align the text, and then draw it:

   // align text horizontally center context.textAlign = "center"; // align text vertically center context.textBaseline ...