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 x = 0;
let y = 0;
let spawnX = 0;
let spawnY = 0;
let rep = 0;
document.addEventListener("mousedown", function up(e) {
	spawnX = e.pageX;
  spawnY = e.pageY;
  point(spawnX, spawnY, 2);
}, 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 point(x2, y2, s) { // x2 and y2 are where you want it to go. s is the speed you want it to travel.
	moveX = x - x2;
  moveY = y - y2;
  let dis = Math.sqrt((moveX * moveX) + (moveY * moveY));
  moveX = (moveX / dis) * s;
 	moveY = (moveY / dis) * s;
}
function render() {
	ctx.clearRect(0, 0, 400, 400);
    	x -= moveX;
    	y -= moveY;
    block(0, 0, 400, 400, "black");
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.stroke();
}
setInterval(render, 10);
</script>
</body>
</head>
</html>