<body>
    <canvas id="canvas">your browser does not support canvas</canvas>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="app.js"></script>
</body>
#canvas{
    position: absolute;
    width: 100vmin;
    height: 99%;
    background-color: rgb(64, 83, 189);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 10px solid rgb(12, 0, 2);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
const canvas = $("#canvas")[0];
const ctx = canvas.getContext("2d");

var widthclientX = canvas.clientWidth;
var widthclientY = canvas.clientHeight;
var width = (canvas.width = 500);
var height = (canvas.height = 500);

var differenceX = width - widthclientX;
var differenceY = height - widthclientY;
$(window).resize(() => {
  widthclientX = canvas.clientWidth;
  widthclientY = canvas.clientHeight;
  differenceX = width - widthclientX;
  differenceY = height - widthclientY;
});
var currentBallX = 250;
var currentBallY = 250;

// Dragabble Ball Code
var dragable = false;

$("#canvas").bind("mouseup touchend", (e) => {
  dragable = false;
});
$("#canvas").bind("mousedown", (e) => {
  if (
    e.offsetX < currentBallX + 40 &&
    e.offsetX > currentBallX - 40 &&
    e.offsetY > currentBallY - 40 &&
    e.offsetY < currentBallY + 40
  ) {
    dragable = true;
  } else {
    dragable = false;
  }
  //   console.log(e.offsetX, e.offsetY);
});
$("#canvas").on("touchstart", (e) => {
  var bcr = e.target.getBoundingClientRect();
  var x = e.targetTouches[0].clientX - bcr.x;
  var y = e.targetTouches[0].clientY - bcr.y;
  console.log(x, y);
  var xPrecentage = (x * 100) / widthclientX;
  var yPrecentage = (y * 100) / widthclientY;
  if (
    x < currentBallX - (differenceX * xPrecentage) / 100 + 20 &&
    x > currentBallX - (differenceX * xPrecentage) / 100 - 20 &&
    y > currentBallY - (differenceY * yPrecentage) / 100 - 20 &&
    y < currentBallY - (differenceY * yPrecentage) / 100 + 20
  ) {
    console.log("true");
    dragable = true;
  } else {
    console.log("false");
    dragable = false;
  }
});
$("#canvas").on("touchmove", (e) => {
  var bcr = e.target.getBoundingClientRect();
  var x = e.targetTouches[0].clientX - bcr.x;
  var y = e.targetTouches[0].clientY - bcr.y;
  var xPrecentage = (x * 100) / widthclientX;
  var yPrecentage = (y * 100) / widthclientY;
  if (dragable) {
    currentBallX = x + (differenceX * xPrecentage) / 100;
    currentBallY = y + (differenceY * yPrecentage) / 100;
  }
});
$("#canvas").bind("mouseout", (e) => {
  dragable = false;
});
$("#canvas").bind("mousemove", (e) => {
  if (dragable) {
    currentBallX = e.offsetX;
    currentBallY = e.offsetY;
  }
});

function animate() {
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.arc(currentBallX, currentBallY, 40, 0, 2 * 3.14);
  ctx.stroke();
  ctx.fill();
  requestAnimationFrame(animate);
}
animate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.