As part of my ongoing investigations into HTML5 I decided to try my hand at adding some text together with an image to an HTML5 canvas element. I wanted to create a simple navigational interface as shown in the image to the left. As you can see I set the image to overlap the text and set transparent edges on the outside of the image.
I’m not sure how useful this really is, but I can see cases where it could certainly come in handy. In general HTML5 seems like quite a powerful mark-up language when compared with HTML 4.01
At this point I’m not worrying about adding transitional effects to handle mouse click events. I just want to get a feel for working with text and pictures in HTML5.
The commands I used were fillText to render the text to the Canvas and drawImage to add the image.
Here is the code using JQuery:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
context.font="30px Arial";
context.fillText("Forward Button",5,30);
var testImage = new Image();
testImage.src = "btnFore.png";
context.drawImage(testImage,190,20);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
Your browser does not support HTML5.
</canvas>
</body>
</html>
Here is the Same Code Using Pure JavaScript:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<style type="text/css" media="screen">
</style>
<script type="text/javascript">
function init() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font="30px Arial";
context.fillText("Forward Button",5,30);
var testImage = new Image();
testImage.src = "btnFore.png";
context.drawImage(testImage,190,20);
}
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="500px" height="500px"></canvas>
</body>
</html>
As you can see, using JQuery or JavaScript with the HTML5 Canvas element is quite straightforward.
- The fillText command works as follows: context.fillText(“add your text”, x-coordinate, y-coordinate);
- The drawImage command needs you to first declare an image element and give the source location of the image before you can use the drawImage command as follows: context.drawImage(ImageObject ,x-coordinate, y-coordinate)
The order in which the elements are added to the canvas matters, since I was able to get an overlapping effect by adding the image to the canvas after I added the text. When I tried adding the image first and then the text, then as expected the text overlapped the image. Definitely good to know!
Something also worth noting is how the vertical position is specified when using the y-coordinates.
Specifically, the fillText command calculates the position of where to render your text from the top of the canvas element to the bottom of the text. So if your text is 30 pixels high and you set the y-coordinate component of the fillText command to 20 pixels, then the top part of your text will be cut off.
Conversely, the drawImage command calculates the y-coordinate position based on the top of the canvas to the top of your image. Thus a 30 pixel high image that is rendered to the canvas starting at a y-coordinate of 20 pixels would render just fine.
So the handling of the y-coordinates between the fillText and drawImage commands are different, and this should be kept in mind as you work with your canvas.
How about Setting Opacities?
Setting opacities for the various elements is also straightforward to do using the globalAlpha command. For instance if we want the text to be solid black, but the image element to be more of a watermark beneath the text, we can set the globalAlpha to 1 before we render the text, and then set the globalAlpha to 0.5 right before we render the image element.
Here is what the JavaScript Version of our Example Code Would Look Like when Setting Opacities:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<style type="text/css" media="screen">
</style>
<script type="text/javascript">
function init() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.globalAlpha = 1
context.font="30px Arial";
context.fillText("Forward Button",5,30);
var testImage = new Image();
testImage.src = "btnFore.png";
context.globalAlpha = 0.5
context.drawImage(testImage,190,20);
}
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="500px" height="500px"></canvas>
</body>
</html>
Justin Cooney 
Nice Justin !
I can’t get it to work… it just pops up in a new window for me!