JSFiddle - React, Tailwind, and code Playground

by ItsLeeOwen

HTML

<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="500">
 Your browser does not support HTML5 Canvas.
</canvas>
</div>

JavaScript

canvasApp();


function canvasApp() {
    console.clear()
    var last,
        count = 0
  function  drawScreen () {

      context.fillStyle = '#EEEEEE';
      context.fillRect(0, 0, theCanvas.width, theCanvas.height);
      //Box
      context.strokeStyle = '#000000';
      context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);

            var dX = circle.target.x - ball.x,
          dY = circle.target.y - ball.y,
    angle = Math.atan2(dY, dX),
        radians = angle * (Math.PI / 180),
        distance = Math.sqrt(dX*dX + dY*dY),
    distanceX = Math.cos(angle) * circle.speed,
        distanceY = Math.sin(angle) * circle.speed      
                  //console.log(distance)
            circle.radius = (circle.originalRadius * (distance / circle.distance)) * circle.velocity
            
            if (distance < 10) {
                circle.radius = 0
                circle.velocity = 0
                if (distance > 3) {
                ball.x += distanceX
                ball.y += distanceY
                } else {
                   ball.x = circle.centerX = circle.target.x
                   ball.y = circle.centerY = circle.target.y
                }
            } else {
                if (circle.velocity < 1)
                circle.velocity += 0.1
                circle.centerX += distanceX
            circle.centerY += distanceY
                ball.x = (circle.centerX + Math.sin(circle.angle) * circle.radius)
      ball.y = (circle.centerY + Math.cos(circle.angle) * circle.radius)
            }

      circle.angle += (circle.speed * circle.orbit);
      
      var mod = circle.angle % Math.PI
      if (!last || last < mod) {
          last = mod
      } else if (!circle.stopped) {
          last = mod
          count++
          if (count == 2) {
              circle.stopped = true
          }
      }

      context.fillStyle = "#000000";
      context.beginPath();
      context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
     ...