Try out using arc(), arcTo(), and bezierCurveTo() to draw tube map type and signal box track diagrams
//arcTo(x1, y1, x2, y2, radius)
A----B \| | C // Start a path ctx.beginPath(); ctx.moveTo(20, 20); // A // Create a horizontal line ctx.lineTo(100, 20); // Create an arc ctx.arcTo(150, 20, 150, 70, 50); // Create a vertical line ctx.lineTo(150, 120);
How arcTo() works One way to think about arcTo() is to imagine two straight segments: one from the starting point to a first control point, and another from there to a second control point. Without arcTo(), these two segments would form a sharp corner: arcTo() creates a circular arc at this corner and smooths it out. In other words, the arc is tangential to both segments.