JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400" style="border: 1px solid black;">
</canvas>

JavaScript

var ctx;

function drawSoftLine(x1, y1, x2, y2, lineWidth, r, g, b, a) {
   ctx.save();
   var widths = [1   , 0.8 , 0.6 , 0.4 , 0.2  ];
   var alphas = [0.2 , 0.4 , 0.6 , 0.8 , 1    ];
   var previousAlpha = 0;
   for (var pass = 0; pass < widths.length; pass++) {
      ctx.beginPath();
      ctx.lineWidth = lineWidth * widths[pass];
      // ctx.lineCap = "round";
      alpha = alphas[pass] * a;
      // Formula: (1 - alpha) = (1 - deltaAlpha) * (1 - previousAlpha)
      var deltaAlpha = 1 - (1 - alpha) / (1 - previousAlpha)
      ctx.strokeStyle = "rgba(" + r + "," + g + "," + b + "," + deltaAlpha + ")";
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
      previousAlpha = alpha; }
   ctx.restore(); }

ctx = document.getElementById('canvas').getContext('2d');

//            x1   y1   x2   y2    w    r    g    b    a
drawSoftLine( 40,  60, 350, 260,  80,  50, 200,   0,   1);   // green
drawSoftLine( 50, 350, 320,  20,  20, 200,  50,   0, 0.5);   // red
drawSoftLine(330, 360, 180,  30,  30,  20,  50, 200, 0.6);   // blue