HTML and CSS Reference
In-Depth Information
Reworking the example to add just such a library makes things work just fine:
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() :
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
Search WWH ::

Custom Search