JSFiddle - React, Tailwind, and code Playground

by Raphael Quintao

HTML

<body style="background:#262626;">
  <canvas id="myCanvas" width="578" height="200"></canvas>
</body>

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function drawCircle(cx, cy, radius, percent, lineWidth, color, startAngle = 0, anticlockwise = true) {
  var offRad = (Math.PI / 180) * startAngle;
  var p = 2 * Math.PI * (1 - percent);
  var step = Math.PI / 180;
  var x = 0;
  var y = 0;
  context.save();
  context.beginPath();
  for (var i = 0; i < (2 * Math.PI) - p; i += step) {
    x = cx + (radius - lineWidth / 2) * Math.cos(i + offRad) * (anticlockwise ? -1 : 1);
    y = cy + (radius - lineWidth / 2) * Math.sin(i + offRad);

    context.lineTo(x, y);
  }
  context.strokeStyle = color;
  context.lineCap = 'round';
  context.lineWidth = lineWidth;
  context.stroke();
  context.restore();
}

var offDeg = -90;
var offRad = (Math.PI / 180) * offDeg;
context.beginPath();
var centerX = 288;
var centerY = 75;
var radius = 70;
var percent = 0.6;
var startAngle = -90; //descubra;
var endAngle = (offRad - Math.PI * 2) * 0.5; //descubra;
//context.arc(centerX, centerY, radius, startAngle, endAngle, true);
drawCircle(centerX, centerY, radius, percent, 3, 'red', startAngle, false);
//context.closePath();
//context.lineWidth = 2;
//context.fillStyle = 'red';
//context.fill();
//context.strokeStyle = 'gold';
//context.stroke();