JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<input type=range id=percent min=-50 value=0 max=50 step=1><br>
<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.lineWidth=8;
ctx.strokeStyle='blue';

var PI2=Math.PI*2;
var cx=150;
var cy=150;
var radius=50;
draw(0);

var $percent=$('#percent');
$percent.on('change',function(){
    draw(parseInt($percent.val()));
});


function draw(x){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc(cx+x,cy,radius,0,PI2);
    ctx.closePath();
    ctx.stroke();
    console.log(cx+x);
}