HTML and CSS Reference
In-Depth Information
In this version of the earlier diagram, the
control points have been drawn along
with lines connecting the control points
to the start and end of the path; this
should help you visualize what's going
on. The drawn lines are distorted from
their direct path so they approach an
imaginary line drawn between the start
or end point and the control point. Check
out the full listings for these examples in
ch03/canvas-6.html and ch03/canvas-6-
controls.html of the code download at
www.manning.com/crowther/
.
As you can see, it's easy to create some interesting shapes. But
drawing curved lines can be hit or miss, especially if you're
trying to get the curve to line up with some other drawn
object. The best approach is usually trial and error.
Placing images
One of the great features of
<canvas>
is that
you can use it to manipulate images and
achieve effects that are otherwise difficult to
do with
HTML
and
CSS
. Here's an example
of what can be achieved: a reflection effect.
The
<canvas>
element can't download
images—you can't give it a
URL
and expect
it to fetch the image. Any image you want to
use must already be available in your page
content. There are various ways to do this,
but the easiest is to include the element in
the normal way. In this case, it's hidden:
<div style="display: none;">
<img id="myimage" src="example.png" width="236" height="260">
</div>
