JSFiddle - React, Tailwind, and code Playground

by Caleb Evans

HTML

<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.js"></script>
<p>Click and drag the scroll thumb to move it around the scroll arc.</p>
<canvas width="400" height="400"></canvas>

CSS

canvas {
 border: solid 2px #eee;    
}

JavaScript

// Get canvas attributes
var $canvas = $('canvas');
var canvasW = $canvas.width();
var canvasH = $canvas.height();
var centerX = canvasW/2;
var centerY = canvasH/2;

// Do no drag initially
var drag = false;

// Clear canvas initially
$canvas.clearCanvas();

// Set some defaults for the scroll arc
$canvas.jCanvas({
  strokeWidth: 10,
  x: centerX, y: centerY,
  radius: 100,
  rounded: true
})

// Draw body of scroll arc
$canvas.drawArc({
  layer: true,
  strokeStyle: "#58d",
  start: -90,
  end: 90,
  rounded: true
});

// Draw scroll thumb
$canvas.drawArc({
  layer: true,
  name: "thumb",
  strokeStyle: "#000",
  start: -10, end: 10,
});

// Get the arc body
var arc = $canvas.getLayer("");
var thumb = $canvas.getLayer("thumb");

// Press mouse to start drag
$canvas.mousedown(function(event) {
  drag = true;
});

// Release mouse to stop drag
$canvas.mouseup(function(event) {
  drag = false;
});

// Drag only when mouse is pressed
$canvas.mousemove(function(event) {
  var angle;
  if (drag) {
    // Ensure center of measurement equals center of arc
    event.offsetX -= (centerX);
    event.offsetY -= (centerY);
    
    // Calculate angle and convert to degrees
    angle = Math.atan(event.offsetX/event.offsetY);
    angle *= -(180/Math.PI);
    
    // Set start/end angles of thumb
    thumb.start = angle - 10;
    thumb.end = angle + 10;

    // Redraw layers
    $canvas.drawLayers();
  }
});