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) {
   var lx = x2 - x1;
   var ly = y2 - y1;
   var lineLength = Math.sqrt(lx*lx + ly*ly);
   var wy = lx / lineLength * lineWidth;
   var wx = ly / lineLength * lineWidth;
   var gradient = ctx.createLinearGradient(x1-wx/2, y1+wy/2, x1+wx/2, y1-wy/2);
      // The gradient must be defined accross the line, 90° turned compared to the line direction.
   gradient.addColorStop(0,    "rgba("+r+","+g+","+b+",0)");
   gradient.addColorStop(0.43, "rgba("+r+","+g+","+b+","+a+")");
   gradient.addColorStop(0.57, "rgba("+r+","+g+","+b+","+a+")");
   gradient.addColorStop(1,    "rgba("+r+","+g+","+b+",0)");
   ctx.save();
   ctx.beginPath();
   //ctx.lineWidth = lineWidth;
   ctx.lineCap = "round";
   ctx.strokeStyle = gradient;
   //ctx.moveTo(x1, y1);
   ctx.arc(x1, y1,lineWidth, 0, Math.PI*2, false);
   //ctx.lineTo(x2, y2);
   ctx.stroke();
   ctx.restore(); 
   }

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

//            x1   y1   x2   y2    w    r    g    b    a
drawSoftLine( 40,  60, 350, 260,  40,  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