JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<html>
<head>
<body>
<canvas id = "canvas" width = "720" height = "540" style = "border: 1px solid"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let mX = 0;
let mY = 0;
let imageName = ["up1.bmp", "up10.bmp"];
let image = new Image();
image.src = imageName[1];
let sine = 0;
let sineChange = 0;
let mouseOn = false;

document.addEventListener("mousemove", function(e) {
 mX = e.clientX - 8;
 mY = e.clientY - 8;
});
function block(x, y, w, h, c) {
 ctx.beginPath();
 ctx.rect(x, y, w, h);
 ctx.fillStyle = c;
 ctx.fill();
 ctx.closePath();
}
function text(text, x, y, px, color) {
    ctx.beginPath();
    ctx.font = px + "px Roboto Mono";
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
    ctx.closePath();
}
function circle(x, y, d, c) {
 ctx.beginPath();
 ctx.arc(x, y, d, 0, 2 * Math.PI);
 ctx.fillStyle = c;
 ctx.fill();
 ctx.closePath();
}
let prevVal = 0;


function render() {
 let s = 0;
 let add = 0;
 ctx.clearRect(0, 0, 800, 800);
 prevVal = mouseOn;
 if (mX > 260 && mX < 460 && mY > 170 && mY < 370) {
  mouseOn = true;
  add = 20;
 } else {
  mouseOn = false;
  add = 0;
 }
 if (prevVal != mouseOn) {
  if (mouseOn == true) {
   sine = 0;
   sineChange = 20;
  } else {
   sineChange += 6;
  }
 }
 s = (Math.sin(sine / 1) * sineChange * 2);
 circle(360, 270, s + 100 + add, "black");
 sineChange -= sineChange / 12;
 sine += 0.2;
}
setInterval(render, 10);
</script>
</body>
</head>
</html>