const canvas = document.createElement('canvas');

const c = canvas.getContext('2d');

const brush = document.createElement('canvas');

const brushC = brush.getContext('2d');

canvas.width = innerWidth;

canvas.height = innerHeight;

brush.width = innerWidth;

brush.height = innerHeight;

document.body.appendChild(canvas);

c.fillStyle = 'black'

c.fillRect(0, 0, canvas.width, canvas.height);

let brushSize = 50;

let featherSize = .1;

let featherSteps = Math.floor(brushSize * featherSize) + 1;

let st = brushSize - featherSteps;

let a = 0;

if (st < 1) st = 1;

for (let i = 0; i < st; i++) {

  a = 1 / (st - i)

  c.strokeStyle = `rgba(255, 255, 255, ${a})`;

  console.log(c.strokeStyle)

  c.lineWidth = brushSize - i;

  c.lineJoin = 'round'

  c.lineCap = 'round'

  c.beginPath();

  c.moveTo(50, 50);

  c.lineTo(200, 200);

  c.bezierCurveTo(300, 200, 400, 200, 300, 400);

  c.stroke();

}