From 1a3b786effa847175377f6008ed6fb26cc399a28 Mon Sep 17 00:00:00 2001
From: samreid <reids@colorado.edu>
Date: Tue, 11 Aug 2020 12:50:36 -0600
Subject: [PATCH] Improve rendering for the faded out part of the path, see
 https://github.com/phetsims/gravity-and-orbits/issues/330

---
 js/common/view/PathsCanvasNode.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/common/view/PathsCanvasNode.js b/js/common/view/PathsCanvasNode.js
index 6bb7142a..d014c7a6 100644
--- 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 ) {