fix(canvas-display): Use round line joins to avoid jagged edges.

conveyal · Mar 10, 2021 · d476ea6 · d476ea6
1 parent d9f9059
commit d476ea6
Show file tree

Hide file tree

Showing 3 changed files with 413 additions and 1 deletion.
diff --git a/lib/display/canvas-display.js b/lib/display/canvas-display.js
@@ -93,6 +93,10 @@ export default class CanvasDisplay extends Display {
     // Apply linecap style
     this.ctx.lineCap = attrs['stroke-linecap'] || 'butt'
 
+    // Apply 'round' line join for smooth edge rendering.
+    // (The default join is 'miter', which causes jagged edges when zoomed away.)
+    this.ctx.lineJoin = 'round'
+
     // Draw the path
     this.ctx.beginPath()
     this.ctx.moveTo(renderData[0].x, renderData[0].y)

diff --git a/stories/Transitive.stories.js b/stories/Transitive.stories.js
@@ -28,7 +28,7 @@ Itinerary.args = {
 
 export const Itinerary2 = Template.bind({})
 Itinerary2.args = {
-  center: [28.535358, -81.378984],
+  center: [28.5459257, -81.3467216],
   companies,
   itinerary: require('./data/fdot-itin.json'),
   styles: {