Text for the HTML Canvas
HTML Canvas 2D Context – Part 5
Foreword: In this part of the series, I explain how to cause DOM to write text in the html canvas element.
By: Chrysanthus Date Published: 16 Apr 2016
Introduction
Basic Writing
You need the following context method to write text on the canvas:
context.fillText(text, x, y)
The text is displayed in a line. (x, y) is the position of the left end of the line of text. The argument, text, is the text in quotes. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.fillText("Yes, Illustration",75,80);
}
</script>
</body>
</html>
The text is actually drawn and not written. So it cannot be select with the mouse.
The font Property
When you use just the fillText method the text drawing uses the default font. You can choose the font that the drawing will use. You do this using the font property, which is,
context.font [ = value ]
The value is a string. It consists of the CSS font property values. An example of the use of the font property is,
cntxt.font = "italic 700 xx-large Unknown Font, monospace";
Here, italic is the font-style; 700 is the font-weight (bold); xx-large is the font-size; the exact font is not known (not important); the font-family is monospace.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.font = "italic 700 xx-large Unknown Font, monospace";
cntxt.fillText("Yes, Illustration",40,30);
}
</script>
</body>
</html>
The strokeText Method
The context strokeText method draws each character with an outline. The syntax in simple terms is,
context.strokeText(text, x, y)
This is an alternative method to the fillText(text, x, y) method. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.font = "italic 700 xx-large Unknown Font, monospace";
cntxt.strokeText("Yes, Illustration",50,60);
}
</script>
</body>
</html>
To give the color of text, you use the fillStyle property. To give the color of the stroke (outline), you use the strokeStyle property. These properties should be typed before the fillText or strokeText method, accordingly.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="color:red;float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.font = "italic 700 xx-large Unknown Font, monospace";
cntxt.fillStyle = "red";
cntxt.strokeStyle = "green";
cntxt.fillText("Yes, Illustration",40,30);
cntxt.strokeText("Tough Guy",40,80);
}
</script>
</body>
</html>
You can use a variable in place of the string of text in the fillText or strokeText method. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="600" height="450" style="color:red;float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.font = "italic 700 medium Unknown Font, monospace";
varA = "Learning to use the canvas is easy after-all.";
cntxt.fillStyle = "red";
cntxt.fillText(varA,40,30);
varB = "Hey, this is because of the teacher we have!";
cntxt.fillStyle = "blue";
cntxt.fillText(varB,40,80);
}
</script>
</body>
</html>
Drawing Illustration
The following code draws a circle and labels the center with the word “center”. Read and try it, noting that the same context can be used more than once, as long as there is an effective begin and end method:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.lineWidth = 5;
cntxt.strokeStyle = "blue";
cntxt.arc(200,150,80,0,6.28);
cntxt.stroke();
cntxt = cv.getContext('2d');
cntxt.beginPath();
cntxt.lineWidth = 5;
cntxt.strokeStyle = "green";
cntxt.moveTo(198,150);
cntxt.lineTo(202,150);
cntxt.stroke();
cntxt.beginPath();
cntxt.fillStyle = "brown";
cntxt.fillText("Center",206,150);
}
</script>
</body>
</html>
The syntax to draw text to the canvas is:
context.fillText(text, x, y [, maxWidth ] )
You know the use of text, x and y from above. [, maxWidth ] is optional. maxWidth is in pixels (but you do not type the units). If maxWidth is smaller than the natural size of the text, the text is squeezed into the typed maxWidth. maxWidth is the maximum width allowed for the text.
To draw the outline of text instead, you have the syntax:
context.strokeText(text, x, y [, maxWidth ] )
The explanation is the same as for fillText().
To know the width of the text in advance, before you can choose maxWidth, try code as follows:
obj = cntxt.measureText("The Center");
wth = obj.width;
alert(wth);
The text to be drawn, whose width we are looking for, is “The Center”. cntxt is the context object reference. cntxt.measureText() returns an object, called the metrics object. width is an attribute of the metrics object, which holds the width of the text to be drawn.
The syntax for one of the methods of the context object is:
context.font [ = value ]
I have talk about this above. You should consult some other document for details.
The syntax to align text is:
context.textAlign [ = value ]
Possible values are "start", "end", "left", "right", and "center".
Just read and try the following code to see the different effects of the different values:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.textAlign = "start";
cntxt.fillText("Just the Illustration", 100, 10);
cntxt.textAlign = "end";
cntxt.fillText("Just the Illustration", 100, 20);
cntxt.textAlign = "left";
cntxt.fillText("Just the Illustration", 100, 30);
cntxt.textAlign = "right";
cntxt.fillText("Just the Illustration", 100, 40);
cntxt.textAlign = "center";
cntxt.fillText("Just the Illustration", 100, 50);
}
</script>
</body>
</html>
Another syntax for text styles is:
context.textBaseline [ = value ]
Possible values are "top", "hanging", "middle", "alphabetic", "ideographic", or "bottom".
Just read and try the following code to see the different effects of the different values:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<canvas id="C1" width="400" height="300" style="float:right;border:2px solid red">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.textBaseline = "top";
cntxt.fillText("Just the Illustration", 100, 20);
cntxt.textBaseline = "hanging";
cntxt.fillText("Just the Illustration", 100, 60);
cntxt.textBaseline = "middle";
cntxt.fillText("Just the Illustration", 100, 80);
cntxt.textBaseline = "alphabetic";
cntxt.fillText("Just the Illustration", 100, 100);
cntxt.textBaseline = "ideographic";
cntxt.fillText("Just the Illustration", 100, 120);
cntxt.textBaseline = "bottom";
cntxt.fillText("Just the Illustration", 100, 140);
}
</script>
</body>
</html>
The effect is to shift the text up or down by different amounts. The default value is, "alphabetic".
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
DOM Basics for HTMLDOM Event Basics for HTML
HTML Text and Other Elements in DOM
HTML Grouping and Sectioning Content Elements in DOM
DOM and HTML Embedded Content
HTML Canvas 2D Context
More Related Links
PurePerl MySQL API
Major in Website Design
Web Development Course
Producing a Pure Perl Library
BACK NEXT