Sindbad~EG File Manager

Current Path : /usr/home/beeson/public_html/WebMathXpert/Demos/DoubleBufferDemo/
Upload File :
Current File : //usr/home/beeson/public_html/WebMathXpert/Demos/DoubleBufferDemo/DoubleBufferExample.html

<!DOCTYPE html>
<html>
<head>
  <style>
    #canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

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

    // Create an off-screen canvas
    const offScreenCanvas = document.createElement('canvas');
    const offScreenCtx = offScreenCanvas.getContext('2d');

    // Set the canvas dimensions
    canvas.width = 800;
    canvas.height = 600;

    // Set the off-screen canvas dimensions (should match the visible canvas)
    offScreenCanvas.width = canvas.width;
    offScreenCanvas.height = canvas.height;

    let mouseX = 0;
    let mouseY = 0;

    // Event listener for mousemove
    canvas.addEventListener('mousemove', (e) => {
      mouseX = e.clientX - canvas.getBoundingClientRect().left;
      mouseY = e.clientY - canvas.getBoundingClientRect().top;
    });

    function draw() {
      // Clear the off-screen canvas
      offScreenCtx.clearRect(0, 0, offScreenCanvas.width, offScreenCanvas.height);

      // Draw your content onto the off-screen canvas
      offScreenCtx.fillStyle = 'blue';
      offScreenCtx.fillRect(0, 0, offScreenCanvas.width, offScreenCanvas.height);

      // Draw additional elements based on mouse position
      offScreenCtx.fillStyle = 'red';
      offScreenCtx.beginPath();
      offScreenCtx.arc(mouseX, mouseY, 20, 0, Math.PI * 2);
      offScreenCtx.fill();

      // Copy the off-screen canvas onto the visible canvas
      ctx.drawImage(offScreenCanvas, 0, 0);

      // Request the next animation frame
      requestAnimationFrame(draw);
    }

    // Start the animation loop
    draw();
  </script>
</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists