JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

// 1.
// Varying line width, stroking each piece of line separately
var ctx = document.getElementById('canvas1').getContext('2d');
for(var i=0; i<24; i++)
{
    var width = 0.5 + i/2;
    
    var m = 200;
    
    var x1 = Math.cos((i-1)/4) * 180;
    var y1 = Math.sin((i-1)/4) * 140;
    
    var x2 = Math.cos(i/4) * 180;
    var y2 = Math.sin(i/4) * 140;
    
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.strokeStyle = "black";
    ctx.moveTo(m+x1,m+y1);
    ctx.lineTo(m+x2,m+y2);
    ctx.stroke();
}

// 2.
// drawing a continuous line and calling stroke at the end
// however, line width is fixed along the entire line
ctx = document.getElementById('canvas2').getContext('2d');
ctx.beginPath();
for(var i=0; i<24; i++)
{
    var width = 0.5 + i/2;
    
    var m = 200;
    
    var x1 = Math.cos((i-1)/4) * 180;
    var y1 = Math.sin((i-1)/4) * 140;
    
    var x2 = Math.cos(i/4) * 180;
    var y2 = Math.sin(i/4) * 140;
    
    ctx.lineWidth = width;
    ctx.strokeStyle = "black";
    
    if(i==0)
        ctx.moveTo(m+x1,m+y1);
    
    ctx.lineTo(m+x2,m+y2);
}
ctx.stroke();