Canvas - HTML5 - page 190

Again, it's best practice to explicitly define your path segments, to avoid such pitfalls.
One explicit way to avoid segments being connected is to use moveTo(...) , which con-
ceptually “picks up the pen” and moves it to a new location before setting it down,
rather than acting like the pen has drawn a connecting line from the previous location
to the new location.
Vectors versus bitmaps
You may be familiar with the concept of vector drawing as opposed to bitmap drawing.
Vector drawing is essentially describing an image as a series of shapes using equations,
such that the shapes (the vectors) can be modified (rotated, scaled, transformed, etc.)
without any loss of quality.
Bitmap drawing, on the other hand, is specifically constrained to painting a color into
one or more individual pixel locations. Transformations against bitmaps are “lossy” in
that you get some fuzzy or blurry artifacts along color boundaries as you make the
transformations, because what might have been a clear color boundary from one pixel
to the adjacent pixel in the original orientation of the drawing is now not a clear boun-
dary between two pixels, but a mix of colors between the two pixels.
It is important to keep vector and bitmap ideas clear and separate in your mind as you
work with the canvas element. The paths that you draw with API commands like
lineTo(...) are like vectors: they can be defined and then modified using various
transformations, without any loss of quality. Once you have the path in the state that
you want, you then render that path, which creates visible pixels in the bitmap output
of your canvas element. If you were to then apply more transformations to your bitmap,
such as rotating the entire element, you would be subject to potentially “lossy” trans-
formations, as described above.
To put it more plainly, think of your path definitions as vector equations—which are
invisible and, until rendered, can be changed at will—and think of the stroke and fill
operations that you perform against a path as pixel bitmap rendering. In principle, this
is no different from how a vector image editing program would operate.
If you draw a shape (or modify a shape's location or dimensions) where
it overlaps only part of a pixel, such as a line from (10.5,20) to (10.5,50),
each half-pixel will be partially rendered (anti-aliasing), which may pro-
duce fuzzy line effects.
There are, of course, operations that you explicitly want to perform only against the
final rendered output (such as color mutations), but these operations are bitmap-based,
as opposed to the geometric transformations you perform against paths.