JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="demoCanvas"></canvas>

JavaScript

var canvas = document.getElementById('demoCanvas');

    canvas.width=360;//horizontal resolution (?) - increase for better looking text
    canvas.height=360;//vertical resolution (?) - increase for better looking text
    canvas.style.width='180px';//actual width of canvas
    canvas.style.height='180px';//actual height of canvas

    var ctx = canvas.getContext('2d');
    var x = 180;
    var y = 180;
    var radius = 162;
    var startAngle = .69 * Math.PI;
    var endAngle = 0.3 * Math.PI;
    var counterClockwise = false;
    ctx.beginPath();
    ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    ctx.lineWidth = 30;
// line color
    ctx.strokeStyle = '#E8F6FD';
    ctx.stroke();

    var ctx2 = canvas.getContext('2d');
    var x2 = 180;
    var y2 = 180;
    var radius2 = 162;
    var startAngle2 = .69 * Math.PI;
    var endAngle2 = -1.28 * Math.PI;
    var counterClockwise2 = false;
    ctx2.beginPath();
    ctx2.arc(x2, y2, radius2, startAngle2, endAngle2, counterClockwise2);
    ctx2.lineWidth = 30;
// line color
    ctx2.strokeStyle = '#1cadeb';
    ctx2.stroke();