Canvas Deep Dive

Data Visualization Using Lines, Dashes, Dots & Arrows

How to use lineCap, lineJoin, setLineDash, lineDashOffset & miterLimit

Figure 1: Each symbolic line in this figure has been drawn using the JavaScript code explained below.

Cartography might easily be considered the world’s most mature form of data visualization. Over the centuries, mapmakers have created and refined a sophisticated vocabulary of lines and symbols that…