JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='mycanvas' width="300" height="300">cdscsdc</canvas>

CSS

*{
            margin: 0;
            padding: 0;
        }    
        body {
            text-align: center;
        }
        canvas {
            background-color: #FF976E;
            border: 4px solid #FF7640;
            margin: 50px auto;
            box-shadow: 0px 0px 5px #000;
            -moz-box-shadow: px 0px 15px #000;
            -webkit-box-shadow: 0 0 15px #000;
        }

JavaScript

function init() {
            var can = document.getElementById('mycanvas');
            if(can.getContext) {
                var ctx = can.getContext('2d');

                var drawAngledLine = function(x, y, length, angle) {
                    var radians = angle / 180 * Math.PI;
                    var endX = x + length * Math.cos(radians);
                    var endY = y - length * Math.sin(radians);

                    ctx.beginPath();
                    ctx.moveTo(x, y)
                    ctx.lineTo(endX, endY);
                    ctx.closePath();
                    ctx.stroke();
                }

                var drawCircle = function(x, y, r) {
                    ctx.beginPath();
                    ctx.arc(x, y, r, 0, Math.PI*2, true);
                    ctx.closePath();
                    ctx.fill();
                }

                var drawDot = function(x, y, length, angle, value) {
                    var radians = angle / 180 * Math.PI;
                    var endX = x + length*value/100 * Math.cos(radians);
                    var endY = y - length*value/100 * Math.sin(radians);
                    drawCircle(endX, endY, 2);
                }

                var drawText = function(x, y, length, angle, value) {
                    var radians = angle / 180 * Math.PI;
                    var endX = x + length*value/100 * Math.cos(radians);
                    var endY = y - length*value/100 * Math.sin(radians);
                    console.debug(endX+","+endY);
                    ctx.fillText(value+"%", endX+15, endY+5);
                    ctx.stroke();
                }


                var visualizeData = function(x, y, length, angle, value) {

                    ctx.strokeStyle = "#999";
                    ctx.lineWidth = "1";
                    drawAngledLine(x, y, length, angle);

                    ctx.fillStyle = "#0a0";
                    drawDot(x, y, length, angle, value);
                    
                   ...