JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript

//im trying to get the 


    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 75;
    var startAngle = 0// 1.1 * Math.PI;
    var endAngle = 2.0 * Math.PI;//1.9 * Math.PI;
    var counterClockwise = false;
    
    
    
    context.beginPath();
    var gradient = context.createLinearGradient(radius, radius, 0, 0);
    gradient.addColorStop(0, '#3b749a');
    gradient.addColorStop(1, '#FFFFFF');
    context.lineWidth = 15;
    
    context.arc(radius, radius, radius, startAngle, endAngle, counterClockwise);

    // line color
    context.strokeStyle = gradient;
    context.stroke(gradient);