JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <canvas id="myCanvas" width="325" height="250" style="border:1px solid #d3d3d3;"/>
</body>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Draw the pill gauge
ctx.beginPath();
ctx.moveTo(85, 90);
ctx.lineTo(240, 90);
ctx.quadraticCurveTo(280, 90, 280, 120);
ctx.lineTo(280, 130);
ctx.quadraticCurveTo(280, 160, 240, 160);
ctx.lineTo(85, 160);
ctx.quadraticCurveTo(45, 160, 45, 130);
ctx.lineTo(45, 120);
ctx.quadraticCurveTo(45, 90, 85, 90);
ctx.lineWidth = 3;
ctx.strokeStyle = '#73B9E6';
ctx.fillStyle = "#F7F7F7";
ctx.closePath();
ctx.fill();
ctx.stroke();

// Fill the pill gauge with proposed revenue
ctx.beginPath();
ctx.moveTo(85, 90);
ctx.lineTo(110, 90);
ctx.quadraticCurveTo(145, 90, 145, 120);
ctx.lineTo(145, 130);
ctx.quadraticCurveTo(145, 160, 105, 160);
ctx.lineTo(85, 160);
ctx.quadraticCurveTo(45, 160, 45, 130);
ctx.lineTo(45, 120);
ctx.quadraticCurveTo(45, 90, 85, 90);
ctx.fillStyle = "#73B9E6";
ctx.closePath();
ctx.fill();
ctx.stroke();

// Draw target revenue line
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.moveTo(175, 90);
ctx.lineTo(175, 170);
ctx.stroke();

// Display dollar figures
ctx.fillStyle = 'black';
ctx.font = '10pt Calibri';
ctx.fillText('Current Revenue', 50, 65);
ctx.fillText('$102,495.22', 50, 80);
ctx.fillText('Presc Revenue', 190, 65);
ctx.fillText('$204,990.44', 200, 80);
ctx.font = '11pt Calibri';
ctx.fillText('Proposed Revenue', 120, 120);
ctx.fillText('Tgt Revenue', 160, 182);
ctx.font = 'bold 12pt Calibri';
ctx.fillText('$144,315.94', 133, 137);
ctx.fillText('$153,742.88', 150, 200);