Canvas Deep Dive
Using overlays to assemble sophisticated lines
Data Visualization Using Lines, Dashes, Dots & Arrows
by Joe Honton
HTML <canvas> lines
Figures 1 through 4 are drawn using nothing more than HTML <canvas> and JavaScript. See the full article Symbolic cartography using lines for a tutorial with remarks.
Figure 1 Symbolic cartography using lines
Figure 2 Effect of miterLimit on acute angles
Figure 3 Effect of lineCap on dots and dashes
Figure 4 Using overlays to assemble sophisticated lines
Source code
The JavaScript source code for drawing Figures 1 through 4 onto the canvas. Use these as a starting point for your own creativity.
