JSFiddle - React, Tailwind, and code Playground

by Douglas Fedder

HTML

<div id="spacer">
  <canvas id="toggle1" class="toggle" onmousemove="getCoords(event)"></canvas>
</div>
<p id="test"></p>

CSS

#spacer {
    margin: 30px;
}
#toggle1 {
    width: 150px;
}

JavaScript

var canvas=document.getElementById("toggle1");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height=cw/3;
var PI=Math.PI;
var PI2=(PI * 2);
var cx=ch/2;
var cy=ch/2;
var backStyle="#FFFFFF"
var globalID;
var lw=ctx.lineWidth=8;
var radius=ch/2-lw/2;
var half=cw/2;
var currX;
var globalID;
var mouseIsDown=false;

function getCoords(event) {
    var currX = event.clientX;
	document.getElementById("test").innerHTML = currX;
}

function backGround(){	
	if (primX > half){
	  Style="#00FF00";
	  } else {
	  Style="#FF0000";
		};	
  ctx.fillStyle=backStyle;
  ctx.strokeStyle=Style;
  ctx.beginPath();
  ctx.arc(cx+lw/2,cy,radius,(0.5 * PI),(1.5 * PI));
  ctx.lineTo((cw-(ch/2)),0+lw/2);
  ctx.arc((cw-(ch/2+lw/2)),cy,radius,(1.5 * PI),(.5 * PI));
  ctx.lineTo(cx,ch-lw/2);
  ctx.fill();
  ctx.stroke();
};

function mainCir() {
	if (primX > half){
	  Style="#00FF00";
	  on=true;
	  } else {
	  Style="#FF0000";
	  on=false;
		};
	ctx.beginPath();
    ctx.arc(primX,cy,radius,0,PI2);
    ctx.fillStyle=Style;
    ctx.fill();
}

primX = cx;

function draw(){
backGround();
mainCir();
}

draw();

function animate() {
	primX=currX;
	globalID=requestAnimationFrame(animate);
	draw();
}


$("#toggle1").mousedown(function() {
	mouseIsDown=true;
});
$(document).mouseup(function() {
  if(mouseIsDown){
  animate();
  mouseIsDown=false;
}
});