Improve rendering for the faded out part of the path, see #330

phetsims · Aug 11, 2020 · 1a3b786 · 1a3b786
1 parent 67cac96
commit 1a3b786
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/js/common/view/PathsCanvasNode.js b/js/common/view/PathsCanvasNode.js
@@ -176,7 +176,13 @@ class PathsCanvasNode extends CanvasNode {
       context.stroke();
 
       // Draw the faded out part
-      context.lineCap = 'butt';
+
+      // Using "butt" is too "feathered" and makes the stroke look less bold than it should be
+      context.lineCap = 'square';
+
+      // Using "square" makes the stroke too wide, so we must trim it down accordingly.
+      context.lineWidth = STROKE_WIDTH * 0.6;
+
       const faded = body.color;
 
       while ( body.pathLength < maxPathLength && j > 0 ) {