sliders to move dot

by John kuoppala

HTML

<label>X-pos<input type=range id=xpos min=0  value=150 max=300 step=1></label><br>
    <label>Y-pos<input type=range id=ypos min=0 value=150 max=300 step=1></label><br>
    <canvas id="canvas" width=300 height=300></canvas>

CSS

canvas {
    border:1px solid black;
}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth=6;
ctx.strokeStyle='green';

var PI2=Math.PI*2; //place the circle on canvas
var cx = document.getElementById('xpos');
var cy = document.getElementById('ypos');

var radius=3;
draw();

ctx.addEventListener('click', function ())

function draw(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.arc(cx.value,cy.value,radius,0,PI*2);
  ctx.closePath();
  ctx.stroke();
  console.log("X range, X axis: " + cx.value);
  console.log("X range, Y axis: " + cy.value);
    
    requestAnimationFrame(draw);
}