JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<html>

  <head>
    <script src="jquery.min.js"></script>
    <style>
      #myCanvas {
        position: relative;
        left: 20vw;
      }

    </style>
  </head>

  <body>
    <canvas id="myCanvas" width="350" height="350" style="border:1px solid #d3d3d3;">
      Error</canvas>

  </body>

</html>

JavaScript

const circles = [{
  x: 100,
  y: 100,
  radius: 10,
  color: 'black',
  direction: 'right',
  id: 1
}];
var circlenr = 1;
var x = 100;
var y = 100;
var r = 10;
//var duration = 100; // in ms
var nextX, nextY;
//var startTime;
var WIDTH = 300;
var HEIGHT = 300;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 300, 300);
ctx.closePath();
//ctx.stroke();

function drawcircle(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function draw(x, y) {
  clear(WIDTH, HEIGHT);
  ctx.fillStyle = "black";
  drawcircle(x, y, r);
}



function wait(ms) {
  var start = new Date().getTime();
  var end = start;
  while (end < start + ms) {
    end = new Date().getTime();
  }
}

function randomdir(direction) {
  newdirection = "";
  while (true) {
    var newd = getRandomInt(1, 4);
    if (newd == 1) newdirection = "right";
    if (newd == 2) newdirection = "up";
    if (newd == 3) newdirection = "left";
    if (newd == 4) newdirection = "down";
    if (direction != newdirection) break;
  }
  return newdirection;
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

c.onclick = function(event) {
  if (event.region) {
    var region = "";
    //alert('You clicked ' + event.region);
    circles.forEach(circle => {
      if (circle.id == event.region) {
        region = circle.id;
        //break;
      }
    });
    for (var i = circles.length - 1; i >= 0; --i) {
      if (circles[i].id == region) {
        circles.splice(i, 1);
        break;
      }
    }

  }
}

draw(circles[0].x, circles[0].y);
//ctx.addHitRegion({id: "re"+circlenr});
circles[0].id = "re" + circlenr;

var countt = 0;

while (true) {
  countt++;
  //alert("tere");
  wait(1000);
  //alert("headaefd");
  //break;


  /*
  var...