HTML and CSS Reference
In-Depth Information
The next few examples take the image at
right and import it into the
<canvas>
element. The simplest example is to
import the image and place it on the
<can-
vas>
.
You call
drawImage
with three parameters—
the
img
element and the x and y coordinates:
function draw(){
var canvas = document
.getElementById('mycanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var img =
document.getElementById('myimage');
ctx.drawImage(img, 10, 10);
}
}
The example image is too large to fit into the
<canvas>
frame. You can easily fix this by
defining a width and height for the placed
image:
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var img = document
.getElementById('myimage');
ctx.drawImage(
img, 10, 10, 118, 130
);
}
Now you're calling
drawImage
with five param-
eters. The additional two are the width and
height of the placed image.
