Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Bouncing Logo</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: black;
    }

    #upload {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 10;
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 6px;
      border-radius: 6px;
    }

    canvas {
      display: block;
    }
  </style>
</head>
<body>

<input id="upload" type="file" accept="image/*" />

<canvas id="canvas"></canvas>

<script>
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  window.addEventListener("resize", resize);
  resize();

  let img = new Image();
  let imgLoaded = false;

  let x = 100;
  let y = 100;
  let dx = 3;
  let dy = 3;

  document.getElementById("upload").addEventListener("change", (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const url = URL.createObjectURL(file);
    img.src = url;

    img.onload = () => {
      imgLoaded = true;
      // reset position so it doesn't start off-screen
      x = Math.random() * (canvas.width - img.width);
      y = Math.random() * (canvas.height - img.height);
    };
  });

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (imgLoaded) {
      x += dx;
      y += dy;

      if (x <= 0 || x + img.width >= canvas.width) {
        dx *= -1;
      }

      if (y <= 0 || y + img.height >= canvas.height) {
        dy *= -1;
      }

      ctx.drawImage(img, x, y);
    }

    requestAnimationFrame(animate);
  }

  animate();
</script>

</body>
</html>
Editor is loading...