HTML and CSS Reference
In-Depth Information
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
Chapter 4 and Chapter 6 .
Before you display it, you need to wait for the image to load. Create an anonymous callback
function for the Image load event by setting the onload function of the Image object. The
anonymous callback function will be executed when the onload event occurs. When the im-
agehasloaded,youthencall context.drawImage() ,passingthreeparameterstoputitonthe
canvas: Image object, x position, and y position:
var helloWorldImage = new
new Image ();
helloWorldImage . onload = function
function () {
context . drawImage ( helloWorldImage , 160 , 130 );
helloWorldImage . src = "helloworld.gif" ;
Finally, let's draw a box around the text and the image. To draw a box with no fill, use the
context.strokeStyle property 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
forthe strokeRect() methodaretheupperleft x and y coordinates,thewidth,andtheheight:
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.js" >< /script>
< script type = "text/javascript" >
window . addEventListener ( "load" , eventWindowLoaded , false
false );
Search WWH ::

Custom Search