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 X = circle.centerX + Math.sin(circle.angle) * circle.radius
      ball.y = circle.centerY + Math.cos(circle.angle) * circle.radius
     
      //if (X <= ball.x)
        //  circle.centerX += circle.radius * 0.25

      ball.x = X
      
      var dX = circle.target.x - ball.x,
          dY = circle.target.y - ball.y
      
    var angle = Math.atan2(dY, dX),
        radians = angle * (Math.PI / 180),
        distance = Math.cos(angle) * circle.speed,
    distanceX = Math.cos(angle) * circle.speed,
        distanceY = Math.sin(angle) * circle.speed
    
    if (Math.abs(dX) > Math.abs(circle.radius)) {
            circle.centerX += distanceX
    }
            if (Math.abs(dY) > Math.abs(circle.radius))
            circle.centerY += distanceY


      circle.angle += (circle.speed * 0.05);
      
      var mod = circle.angle % Math.PI
      if (!last || last < mod) {
          last = mod
      } else if (!circle.stopped) {
          last = mod
          count++
          if (count == 2) {
              //console.log('stop!')
              circle.stopped = true
          }
      }

      //if (!circle.stopped)
        //  circle.centerX += 0.2
      context.fillStyle = "#000000";
      context.beginPath();
      context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
      context.fill();
      context.closePath();
      context.fillStyle = "#ff0000";
      context.beginPath();
      context.arc(circle.target.x, circle.target.y,5,0,Math.PI*2,true);
      context.closePath();
      context.fill();

   }

   var radius = 100;
    var circle = {
        stoppped:0, 
        velocityX: 1, 
        centerX:0, 
       ...