HTML and CSS Reference
In-Depth Information
You may not even want all of the original
image:
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var img =
document.getElementById('myimage');
ctx.drawImage(img,
80, 100, 80, 160,
10, 10, 160, 200);
}
The previous example calls
drawImage
with nine parameters. Let's exam-
ine them in more detail:
The first parameter is still a
reference to the
img
element.
drawImage(img,
80, 100,#
80, 160,#
10, 10,
160, 200)
The x and y of a point
in source image.
Width and height
for section
of source image.
The x and y point in
the canvas for the
placed image.
Width and height for
the placed image
Drawing text
Let's now turn our attention to text.
The
<canvas>
element has a limited
ability to draw single lines of text on
the context. The text-drawing meth-
ods are more suitable for drawing
labels and titles than for rendering
large blocks of text. But the full
graphical-processing ability of the
<canvas>
element can be applied to the text that's drawn, allowing for
effects like this.
This example takes advantage of the transformation
and gradient fill features of the
<canvas>
element.
More details about them are in the section “Advanced
<canvas>
: gradients, shadows, and animation.''
