JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<p>Use the slider to move lines towards endpoints</p>
<div id="wrapper">
    <input type="text" id="amount" />
    <div id="slider-vertical"></div>
    <canvas id="canvas" width=300 height=300></canvas>
</div>

CSS

body {
          background-color: ivory;
      }
      #wrapper {
          position:relative;
      }
      canvas {
          position:absolute;
          left:40px;
          top:5px;
          border:1px solid red;
      }
      #amount {
          position:absolute;
          left:1px;
          top:5px;
          margin-bottom:15px;
          width:23px;
          border:0;
          color:#f6931f;
          font-weight:bold;
      }
      #slider-vertical {
          position:absolute;
          left:5px;
          top:40px;
          width:15px;
          height:225px;
          border:0px;
          color:#f6931f;
          font-weight:bold;
      }

JavaScript

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

    // some staring test values
    var centerPt = {
        x: 150,
        y: 150
    };
    var radius = 100;
    var angle = 0;
    var startPct = 75;

    // configure a jqUI slider just for testing
    $("#slider-vertical").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: startPct,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
            drawFrame(ui.value);
        }
    });

    // display the slider value
    $("#amount").val($("#slider-vertical").slider("value"));

    // calculate the 3 endpoints at 120 degree separations
    var endPt000 = anglePoint(centerPt, 000);
    var endPt120 = anglePoint(centerPt, 120);
    var endPt240 = anglePoint(centerPt, 240);

    // display at the starting percentage
    drawFrame(startPct);

    // draw a red center dot
    // draw 3 blue endpoint dots
    // draw 3 lines from center going slider% of the way to the endpoints 
    function drawFrame(sliderValue) {
        var pct = sliderValue;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        line(centerPt, pointAtPercent(centerPt, endPt000, pct), "green");
        line(centerPt, pointAtPercent(centerPt, endPt120, pct), "green");
        line(centerPt, pointAtPercent(centerPt, endPt240, pct), "green");
        dot(centerPt, "red")
        dot(endPt000, "blue");
        dot(endPt120, "blue");
        dot(endPt240, "blue");
    }

    // calc XY at the specified angle off the centerpoint 
    function anglePoint(centerPt, degrees) {
        var x = centerPt.x + radius * Math.cos(degrees * Math.PI / 180);
        var y = centerPt.y + radius * Math.sin(degrees * Math.PI / 180);
        return ({
            x: x,
            y: y
        });
    }

    // just draw a dot at XY
    function dot(point, color) {
        ctx.beginPath();
        ctx.arc(point.x, point.y, 5, 0,...