JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Move the mouse on the canvas<br>to change circular slider value.</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
#canvas{border:1px solid red;}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineCap = "round";
ctx.font = "24px arial";
ctx.lineWidth = 20;

var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

var isDown = false;
var startX;
var startY;

var PI2 = Math.PI * 2;
var cx = 150;
var cy = 150;
var radius = 50;
var strokewidth = 15;
var thumbAngle = PI2 / 30;

draw(PI2 / 10);

function draw(radianAngle) {

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

    // circle
    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, PI2);
    ctx.strokeStyle = "blue";
    ctx.lineWidth = strokewidth;
    ctx.stroke();

    // zero marker
    ctx.beginPath();
    ctx.moveTo(cx + radius - strokewidth / 2, cy);
    ctx.lineTo(cx + radius + strokewidth / 2, cy);
    ctx.strokeStyle = "white";
    ctx.lineWidth = 3;
    ctx.stroke();

    // indicator
    ctx.beginPath();
    ctx.arc(cx, cy, radius, radianAngle - thumbAngle / 2, radianAngle + thumbAngle / 2);
    ctx.strokeStyle = "gold";
    ctx.lineWidth = strokewidth - 5;
    ctx.stroke();

    ctx.fillStyle = "gray";
    ctx.textAlign = "center";
    ctx.fillText(parseInt(((radianAngle + PI2) % PI2) / PI2 * 100) + "%", cx, cy + 8);

}


function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);

    // Put your mousedown stuff here
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mouseup stuff here
    isDown = false;
}

function handleMouseOut(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    // Put your mouseOut stuff here
    isDown = false;
}

function handleMouseMove(e) {
 ...