Canvas Draggable Ball
Tags: webdev, canvas, tutorial
Published: 2021-11-22 15:59:37

Well do you know what canvas is? Well only recently, did I figure out about customisation using it.
It is an HTML5 element that allows you to draw fun shapes, lines, and points and manipulate them using animations.
In this post I will walk you though how I created a drag-gable ball using it.

#Here is a preview of what will be the final output - 

{% codepen https://codepen.io/darkxenium/pen/XWawrEg %}
##1. HTML file
Firstly we create our HTML file and use the canvas tag.
```html
<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>
```
##1. CSS file
We then start creating and designing our workspace or the ball. We use basic css here,nothing fancy.
```css
#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%);
  }
```
##3. JS File
Here is where all the magic happens, we add the animations, define the ball constraints, allow for the ball to be draggable. We use simple flags to determine it.
```javascript
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();

```
The goal of this post was to motivate and instigate a spark in someone who is trying to dive into canvas.In my opinion it is an amazing tool and really does wonders.
Hope it helps! Happy learning!