HTML and CSS Reference
In-Depth Information
Finally, we print our test on the screen by calling the fillText() method of the
context object. The three parameters of this method are text string, x position, and y
context.fillText ("Hello World!", 195, 80);
Let's add some graphics to our “Hello World!” text. First, let's load in an image and
display it. We will dive into images and image manipulation in Chapter 4 , but for now,
let's just get an image on the screen. To display an image on the canvas, you need to
create an instance of the Image() object, and set the Image.src property to the name of
the image to load.
You can also use another canvas or a video as the image to display. We
will discuss these topics in Chapters 4 and 6 .
Before you display it, you need to wait for the image to load. Create a callback()
function for the Image load event by setting the onload function of the Image object.
callback() will be executed when the onload event occurs. When the image has loaded,
you then call context.drawImage() , passing three parameters to put it on the canvas:
Image object, x position, and y position:
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
Finally, let's draw a box around the text and the image. To draw a box with no fill, use
the context.StrokeStyle() method to set a color for the stroke (the border of the box),
and then call the context.strokeRect() method to draw the rectangle border. The four
parameters for the strokeRect() method are the upper left x and y coordinates, and the
lower right x and y coordinates:
context.strokeStyle = "#000000";
context.strokeRect(5, 5, 490, 290);
The full code for the HTML5 Hello World! application is shown in Example 1-3 , and
its results are illustrated in Figure 1-3 .
Example 1-3. HTML5 Canvas Hello World!
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH1EX3: Your First Canvas Application </title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
Search WWH ::

Custom Search