HTML and CSS Reference
In-Depth Information
Reworking the example to add just such a library makes things work just fine:
O
NLINE
http://htmlref.com/ch2/canvasie.html
Drawing and Styling Lines and Shapes
HTML5 defines a complete API for drawing on a
canvas
element, which is composed of
many individual sub-APIs for common tasks. For example, to do some more complex
shapes, the path API must be used. The path API stores a collection of subpaths formed by
various shape functions and connects the subpaths via a
fill()
or
stroke()
call. To begin
a path,
context.beginPath()
is called to reset the path collection. Then, any variety of
shape calls can occur to add a subpath to the collection. Once all subpaths are properly
added,
context.closePath()
can optionally be called to close the loop. Then
fill()
or
stroke()
will also display the path as a newly created shape. This simple example draws
a
V
shape using
lineTo()
:
context.beginPath();
context.lineTo(20,100);
context.lineTo(120,300);
context.lineTo(220,100);
context.stroke();
Now, if you were to add
context.closePath()
before
context.stroke()
, the
V
shape would turn into a triangle, because
closePath()
would connect the last point and
the first point.
Also, by calling
fill()
instead of
stroke()
, the triangle will be filled in with whatever
the fill color is, or black if none is specified. Of course, you can call both
fill()
and
stroke()
on any drawn shape if you want to have a stroke around a filled region. Thus, to
