JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=300 height=300></canvas>
<input type="text" id="percent" />
<div id="slider-vertical"></div>

CSS

body {
        background-color: ivory;
    }
    canvas {
        border:1px solid red;
    }
    #slider-vertical {
        height:200px;
        position:absolute;
        top:60px;
        left:350px;
    }
    #percent {
        width:25px;
        position:absolute;
        top:20px;
        left:340px;
        border:0;
        color:blue;
        font-weight:bold;
    }

JavaScript

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

        // styling
        ctx.lineWidth = 15;
        ctx.strokeStyle = "gold";

        // define the rectangle
        var offsetX = 75;
        var offsetY = 100;
        var horizLineLength = 80;
        var vertLineLength = 40;
        var cornerRadius = 25;

        // calc some lengths for use in percent complete
        var cornerLength = 2 * cornerRadius * Math.PI;
        var totalLength = cornerLength * 4 + horizLineLength * 2 + vertLineLength * 2;


        // calc at what accumulated length each part of the rect starts
        var startT = 0;
        var startTR = horizLineLength;
        var startR = startTR + cornerLength;
        var startBR = startR + vertLineLength;
        var startB = startBR + cornerLength;
        var startBL = startB + horizLineLength;
        var startL = startBL + cornerLength;
        var startTL = startL + vertLineLength;

        // percent complete
        var percent = 100;

        // draw the radius rectangle
        function drawPercentRect(percent) {

            // percent expressed as a length-traveled-along-rect
            accumLength = percent / 100 * totalLength;

            // clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // top line
            d = accumLength - startT
            d = Math.min(d, horizLineLength);
            if (d > 0) {
                x1 = offsetX + cornerRadius;
                y1 = offsetY;
                x2 = offsetX + cornerRadius + d;
                y2 = offsetY;
                drawLine(x1, y1, x2, y2);
            }

            // top-right corner
            d = accumLength - startTR;
            d = Math.min(d, cornerLength);
            if (d > 0) {
                x = offsetX + cornerRadius + horizLineLength;
                y = offsetY + cornerRadius;
                start = -Math.PI / 2;
                end = -Math.PI / 2 + (d /...