Text for the HTML Canvas
The HTML canvas Element Basics – Part 5
Forward: In this part of the series, we see how to cause DOM to write text in the html canvas element.
By: Chrysanthus Date Published: 1 Aug 2012
Introduction
Note: If you think anything is missing in this article (missing text, broken links, image absent), just contact me at forchatrans@yahoo.com.
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 let-top corner 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.
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.
The font property should be typed before the fillText method. This is because the fillText property has to use the value of the font property to draw the text. 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.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>
Variable in Argument
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>
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>
Well, that is it for this tutorial.
End of Series
There is more to learn on canvas. I will treat such features as advanced topics. This is the end of the series. I hope you appreciated it.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course