Canvas Deep Dive

Effect of lineCap on dots and dashes

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

Figure 3: Panels "A" and "B" show the effect on dashes. Panels "D" and "E" show how to achieve dots with perfect circles and squares. Panels "C" and "E" differ in the orientation of the dots with respect to the curve. Panel "F" shows how to achieve tickmarks. All panels use lineWidth=6 and dash+gap=15.

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.

Effect of lineCap on dots and dashes