<!-- 1. CSS STYLING -->
<style>
  /* The Viewport: Fixes the size of the window on your page */
  .canvas-viewport {
    width: 100%;
    height: 600px; /* Adjust height as needed */
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #ddd;
    cursor: grab;
    position: relative;
    touch-action: none; /* Required for mobile dragging */
  }

  /* The Infinite Container: Large area with a grid pattern */
  #infinite-canvas {
    width: 5000px; 
    height: 5000px;
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
    background-size: 30px 30px;
    position: absolute;
  }

  /* Individual item styling */
  .canvas-item {
    position: absolute;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: 220px;
  }
  
  .canvas-item img { width: 100%; border-radius: 4px; }
</style>

<!-- 2. HTML CONTENT -->
<div class="canvas-viewport">
  <div id="infinite-canvas">
    
    <!-- Item 1: Text -->
    <div class="canvas-item" style="top: 2500px; left: 2500px;">
      <h3>Infinite Canvas</h3>
      <p>Click and drag to pan. Use your mouse wheel to zoom.</p>
    </div>

    <!-- Item 2: Image -->
    <div class="canvas-item" style="top: 2300px; left: 2800px;">
      <img src="https://images.squarespace-cdn.com" alt="Your Image">
      <p>Replace this URL with your uploaded image link.</p>
    </div>
    
  </div>
</div>

<!-- 3. JAVASCRIPT LOGIC -->
<script src="https://unpkg.com"></script>
<script>
  // Wait for the window to load so the library is ready
  window.addEventListener('load', function() {
    const elem = document.getElementById('infinite-canvas');
    const panzoom = Panzoom(elem, {
      maxScale: 4,
      minScale: 0.2,
      canvas: true // Better performance for large areas
    });

    // Enable zooming with the mouse wheel
    const parent = elem.parentElement;
    parent.addEventListener('wheel', panzoom.zoomWithWheel);
    
    // Start the view in the center of the 5000px canvas
    panzoom.pan(-2200, -2200); 
  });
</script>