JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<canvas id="can"></canvas>

CSS

body {
  background: #000000;
}

#can {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
}

JavaScript

var FULL_CIRCLE = 2 * Math.PI;
var START_ANGLE_TOP = FULL_CIRCLE - (FULL_CIRCLE * 0.25);

function limitPercent(pc)
{
	return pc < 0 ? 0 : (pc > 100 ? 100 : pc);
};

function drawBG(ctx)
{
  _drawArc(ctx, 'rgba(0, 0, 255, 0.5)', START_ANGLE_TOP + FULL_CIRCLE);
};

function drawTime(ctx, elapsedpercent)
{
	var elapsed = limitPercent(elapsedpercent) / 100;
  
  _drawArc(ctx, 'rgba(0, 0, 255, 0.5)', START_ANGLE_TOP + (FULL_CIRCLE * elapsed));
};

function drawLevel(ctx, elapsedpercent)
{
	var elapsed = limitPercent(elapsedpercent) / 100;
  
  _drawArc(ctx, 'rgba(128, 128, 0, 0.5)', START_ANGLE_TOP + (FULL_CIRCLE * elapsed));
};


function _drawArc(ctx, strokestyle, angle)
{
	ctx.save();
  //
  ctx.fillStyle = 'rgba(255, 0, 0, 0)';
  ctx.strokeStyle = strokestyle;
  ctx.lineWidth = 30

  ctx.beginPath();
  ctx.arc(ctx._w / 2, ctx._h / 2, 50, START_ANGLE_TOP, angle);
  ctx.stroke();
  //
  ctx.restore();
};


canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
ctx._w = canvas.width;
ctx._h = canvas.height;

drawBG(ctx);
drawTime(ctx, 65);
drawLevel(ctx, 33);