Displaying an Image on the Canvas with drawImage()
After we have an image loaded in, we can display it on the screen in a number of
ways. The drawImage()
Canvas method
is used for displaying image data directly onto the canvas. drawImage()
is overloaded
and takes three separate sets of parameters, each allowing varied
manipulation of both the image’s source pixels and the destination
location for those pixels on the canvas. Let’s first look at the most
basic:
drawImage
(
Image
,
dx
,
dy
)
This function takes in three parameters: an Image
object, and x
and y
values representing the top-left corner location to start painting the
image on the canvas.
Here is the code we would use to place our spaceship image at the 0,0 location (the top-left corner) of the canvas:
context
.
drawImage
(
spaceShip
,
0
,
0
);
If we want to place another copy at 50,50, we would simply make the same call but change the location:
context
.
drawImage
(
spaceShip
,
50
,
50
);
Example 4-1 shows the full code for what we have done so far.
Example 4-1. Load and display an image file
var
spaceShip
=
new
Image
();
spaceShip
.
addEventListener
(
'load'
,
eventSheetLoaded
,
false
);
spaceShip
.
src
=
"ship1.png"
;
function
eventSheetLoaded
()
{
drawScreen
();
}
function
drawScreen
()
{
context
.
drawImage
(
spaceShip
,
0
,
0
);
context
.
drawImage
(
spaceShip
,
50
,
50
);
}
Figure 4-1 shows the 32×32 ship1.png file.
Figure 4-1. Load and display an image file
In practice, ...
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.