Draw Text on Canvas: HTML5

Today lets learn how to draw text / string on a canvas, using HTML5.

It’s similar to drawing any other paths. You can fillStyle, strokeStyle on them. But the text on canvas can not be directly affected by a cascading style sheet.

index.html and myStyle.css files are kept same as illustrated in previous video tutorial: Canvas State: HTML5

Drawing Text: Syntax
context.fillText(myString, x-axis, y-axis, [maximumWidth-of-text]);
context.strokeText(myString, x-axis, y-axis, [maximumWidth-of-text]);

myString is the text we’re drawing on the canvas. x and y axis is the position of the text to be drawn on the canvas. maximumWidth-of-text is the maximum limit the text can stretch on the canvas i.e., it can’t go beyond that maxWidth value. Also note that, maximumWidth-of-text is an optional parameter.

Javascript file: Drawing Text – font settings
myScript.js

  var myString = "Microsoft";
  context.font = "30px Verdana strong";
  context.textAlign = "left";
  context.strokeStyle = "cyan";
  context.fillStyle = "blue";
  context.textBaseline = "bottom";
  context.fillText(myString, 10, 100, 100);
  context.strokeText(myString, 10, 100, 100);

We store the string Microsoft in a variable called myString. We set the font values to it, with a text align of left and text base line of bottom. Then by applying strokeStyle of cyan and fillStyle of blue, we fillText and strokeText the string present in myString.

Javascript file: Drawing Text – Measure Text Method
myScript.js

  var txtW = context.measureText(myString);
  context.lineWidth = 4;
  context.beginPath();
  context.strokeStyle = "red";
  context.moveTo(10, 110);
  context.lineTo(txtW.width, 110);
  context.stroke();

measureText() method returns the dimension metrics of the string using the current font settings. Here we’re extracting its width property and drawing a line below the string Microsoft.

Javascript file: Drawing Text – Full Code
myScript.js

window.onload = canvas;

function canvas()
{
 var myCanvas = document.getElementById("myCanvas");
 
 if( myCanvas && myCanvas.getContext("2d") ) 
 {
  var context         = myCanvas.getContext("2d");
 
  var myString = "Microsoft";
  context.font = "30px Verdana strong";
  context.textAlign = "left";
  context.strokeStyle = "cyan";
  context.fillStyle = "blue";
  context.textBaseline = "bottom";
  context.fillText(myString, 10, 100, 100);
  context.strokeText(myString, 10, 100, 100);
  
  var txtW = context.measureText(myString);
  context.lineWidth = 4;
  context.beginPath();
  context.strokeStyle = "red";
  context.moveTo(10, 110);
  context.lineTo(txtW.width, 110);
  context.stroke();

 }
}

context.font takes any value that you would normally put into a font css rules: font-family, font-size, font-weight, variant etc.

context.textBaseline takes values like: start(its default value), end, left, right, center.

context.textAlign takes values like: top, bottom, middle, hanging, ideographic, alphabetic(its default value)

Drawing Text on Canvas: HTML5

Note:
1. textAlign renders text based on the positioning of the text on canvas. If you assign a value of center, the text will be centered based on the x and y axis of the text and not based on the canvas width(x-axis) and height(y-axis).
2. By default the font on canvas is 10px in size and has a font-family of sans-serif.