JSFiddle - React, Tailwind, and code Playground
by frogggeee McFrogggeee
HTML
<html>
<head>
<body>
<canvas id = "canvas" style = "border: 1px solid" width = "480" height = "360"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let mX = 0;
let mY = 0;
let blocks = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
document.addEventListener("mousemove", function(e) {
mX = e.clientX;
mY = e.clientY;
});
function block(x, y, w, h, c) {
ctx.beginPath();
ctx.rect(x - 8, y - 8, w, h);
ctx.fillStyle = c;
ctx.fill();
ctx.closePath();
}
function render() {
ctx.clearRect(0, 0, 500, 500);
block(mX - 65, 300, 130, 20, "black");
}
setInterval(render, 10);
</script>
</body>
</head>
</html>