PageCurl effect not working – canvas not created despite correct initialization

[Jumbo125]

Hi, I'm using page-flip.browser.js (v2.0.7) directly in the browser with plain HTML and JavaScript.

My setup appears to be correct:

St.PageFlip is available (typeof function)
loadFromHTML() loads 4 pages successfully
Container (#book) has a fixed height (733px)
document.querySelectorAll(".page").length → returns 4

BUT: document.querySelector("canvas") → returns null

This means: No page flip animation No canvas element rendered No errors in the console

I’m using the officially provided file from jsDelivr CDN: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/page-flip.browser.js

What could prevent the canvas from being created even though everything else seems initialized?

My simple code:

 <div class="flip-book" id="book">
      <div class="page" data-density="soft">
        <div class="page-content">
          <div class="page-image" style="background-image: url('src/turn_js_test2/pdf/1.jpg');"></div>
        </div>
      </div>
      <div class="page" data-density="soft">
        <div class="page-content">
          <div class="page-image" style="background-image: url('src/turn_js_test2/pdf/2.jpg');"></div>
        </div>
      </div>
      <div class="page" data-density="soft">
        <div class="page-content">
          <div class="page-image" style="background-image: url('src/turn_js_test2/pdf/3.jpg');"></div>
        </div>
      </div>
      <div class="page" data-density="soft">
        <div class="page-content">
          <div class="page-image" style="background-image: url('src/turn_js_test2/pdf/4.jpg');"></div>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const pageFlip = new St.PageFlip(document.getElementById("book"), {
          width: 508,
        height: 733,
          size: "fixed",
          showCover: true,
          useMouseEvents: true,
          maxShadowOpacity: 0.5,
          mobileScrollSupport: false
        });
  
        pageFlip.loadFromHTML(document.querySelectorAll(".page"));
      });
    </script>

Thank you a lot!!!! best regeards

[Jumbo125]

Hello i found the fail. 👍