HTML and CSS Reference
In-Depth Information
If you've added all three of these examples to the original listing, then
you should have something similar to the ch03/canvas-text-4.html file
in the code download.
To further control the text position you can set the baseline of the text,
which will adjust where it's drawn in relation to the coordinates you
provide. This is useful if you're trying to position labels next to things
on your canvas because it saves you having to work out exactly how
tall the letters will be drawn.
The default value is
alphabetic
, which means the bottom of an upper-
case letter is placed at the y coordinate you provide in
fillText
. The
following line sets the baseline to
top
, which means the top of an upper-
case letter will be placed in line with the provided y coordinate:
ctx.textBaseline = "top";
The following figure shows the previous example alongside a similar
example, except with
textBaseline
set differently.
textBaseline = "alphabetic";
textBaseline = "top";
20px
80px
150px
Other values for
text-
Baseline
are
hanging
,
middle
,
ideographic
, and
bottom
.
You can now draw images and text on
your
<canvas>
element. The simple
examples we've covered here may not
seem much more exciting than what
can be achieved with plain HTML and
CSS, but we've barely scratched the
surface. In the next section, you'll
learn about some more advanced
techniques: gradients, drop
shadows, and transformations.
Advanced <canvas>: gradients, shadows, and animation
With the ability to draw a single-pixel shape on any part of the canvas,
it's possible for you to create any effect you want by implementing it
