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";
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
Search WWH ::

Custom Search