JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "400" height = "400"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let mX = 0;
let mY = 0;
let x = 0;
let y = 0;
let spawnX = 0;
let spawnY = 0;
let rep = 0;
document.addEventListener("mousemove", function moved(e) {mX = e.clientX; mY = e.clientY;});
document.addEventListener("mousedown", function up(e) {
	spawnX = e.pageX;
  spawnY = e.pageY;
  moveTo(spawnX, spawnY, 3);
}, false);
function block(x, y, w, h, c) {
	ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
let moveX = 0;
let moveY = 0;
function moveTo(x2, y2, s) {
	moveX = x - x2;
  moveY = y - y2;
  let dis = Math.sqrt((moveX * moveX) + (moveY * moveY));
  moveX = (moveX / dis) * s;
 	moveY = (moveY / dis) * s;
  rep = dis / s;
}
function render() {
	ctx.clearRect(0, 0, 400, 400);
    if (rep > 0) {
    	x -= moveX;
    y -= moveY;
    }
    rep--;
    
    block(0, 0, 400, 400, "black");
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.stroke();
}
setInterval(render, 10);
</script>
</body>
</head>
</html>