Canvas Deep Dive

Effect of miterLimit on acute angles

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 2: Panels "A", "B", "C" clip the tip of the arrow with miterLimit=1. Panels "D", "E", "F" use a different miterLimit for each arrow, suitable for the given angle, that allows the full arrowhead tip to be drawn. All panels use lineJoin="miter".

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 miterLimit on acute angles