Instructobit
The canvas element (new to HTML5) is used to draw 2D graphics into an
HTML document. Using Javascript you can draw a wide range of objects
into an HTML canvas such as lines, text, images and shapes using several
built in functions.
Drawing text on an HTML5 canvas is a useful ability that you can use to add extra information to any data, images or shapes you have previously drawn on your canvas.
Adding a canvas to your HTML document and interacting with it in Javascript
To use Javascript to interact with an HTML canvas, you will first need to add the canvas element into your HTML document like so:
<canvas id="testCanvas" width="200" height="200">
</canvas>
In this example we give the canvas a fixed width and height to make it easier to keep track of co-ordinates. This canvas will be used throughout the tutorial.
Once the canvas element has been added to your HTML document, you must then acquire a context object from it by retrieving the canvas element and calling the getContext("2d") method.
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
With the context object you can call certain functions that will allow you to draw objects to the canvas.
Drawing text onto your HTML canvas using Javascript
Once the 2D context object has been acquired you can start drawing text onto your HTML canvas. Drawing text can either be done using the fillText() method or the strokeText() method of the context object.
Both the fillText() and strokeText() methods take 4 arguments (of which 3 are required):
-
text
: A string value containing the text you wish to draw to the canvas
-
X
: The X coordinate of where to start drawing the string to your canvas
-
Y
: The X coordinate of where to start drawing the string to your canvas
-
max-width
(optional) : The maximum pixel width of drawn text
The main difference between the two methods is that strokeText() will only draw the outlines for each letter whereas fillText() will also fill the inside of the text.
Drawing text using the
fillText()
method:
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "30px Impact";
// draw "Test text" at X = 10 and Y = 30
context.fillText( "Test text", 10, 30 );
The text drawn to the canvas will look like this:
Drawing text using the
strokeText()
method:
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "30px Impact";
// draw "Test text" at X = 10 and Y = 30
context.strokeText( "Test text", 10, 30 );
The text drawn to the canvas will look like this:
Styling your text before drawing it onto your canvas
There are several properties of the 2D context object that you can use to change the appearance and style of the text you draw to your canvas.
Changing the
font
and
font-size
:
To change the font and font-size you can make use of the
font
property of the context object, simply provide a font-size in pixels and the name of the font you want to use such as Verdana.
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "40px Verdana";
// draw "Test text" at X = 10 and Y = 30
context.fillText( "Test text", 10, 30 );
The text drawn to the canvas will look like this:
Changing the
font color
:
The fillStyle property of the context object can be used to change the color of the text (it can also add a gradient or pattern). To change the color using this property, simply give a
as a value.
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "30px Impact";
// change font color
context.fillStyle = "red";
// draw "Test text" at X = 10 and Y = 30
context.strokeText( "Test text", 10, 30 );
The text drawn to the canvas will look like this:
Changing the
alignment
of your text:
By using the textAlign property of the context object, you can change the alignment of your text relative to the given X position given for fillText() or strokeText(). There are several values from which you can choose:
-
start
: Drawn text will begin at the given X position
-
end
: Drawn text will end at the given X position
-
left
: The starting point for text will be to its left (essentially the same as start)
-
right
: The ending point for text will be to its right (essentially the same as end)
-
center
: Drawn text will center itself around the given X position
As an example, let's create a canvas with text using each of these values and the same X point.
var canvas = document.getElementById( "testCanvas" );
var context = canvas.getContext( "2d" );
// change font and font-size for better visibilty
context.font = "30px Arial";
// draw each string with same X value but different alignment
context.textAlign = "start";
context.fillText( "start", 80, 30 );
context.textAlign = "end";
context.fillText( "end", 80, 60 );
context.textAlign = "left";
context.fillText( "left", 80, 90 );
context.textAlign = "right";
context.fillText( "right", 80, 120 );
context.textAlign = "center";
context.fillText( "center", 80, 150 );
The text drawn to the canvas will look like this:
More on the HTML5 canvas:
-
Drawing straight line onto an HTML5 canvas using Javascript
-
Creating a line graph using an HTML5 canvas and Javascript
