From f3e6eb611dafb755734946449dbd2922a0a2e939 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 21 Mar 2024 19:00:15 +0100
Subject: [PATCH] wait #6815 @4

---
 _index.html                           |  1 -
 js/libs/fluidbook/fluidbook.loader.js | 40 +++++++++++++--------------
 style/fluidbook.less                  |  2 +-
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/_index.html b/_index.html
index 847eb455..24e0319f 100644
--- a/_index.html
+++ b/_index.html
@@ -112,7 +112,6 @@
 <div id="pagesContents" aria-hidden="true"><!-- $pagesContents --></div>
 <div id="op" aria-hidden="true"></div>
 <div id="ol" aria-hidden="true"></div>
-<canvas id="pscanvas" width="4096" height="4096" aria-hidden="true"></canvas>
 <div id="loader" aria-hidden="true"></div>
 <div id="hiddencontents" aria-hidden="true"></div>
 <div id="splash" style="background-color:#<!-- $bgcolor -->;<!-- $splashstyles -->" aria-hidden="true">
diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 184eb58b..472500fd 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -685,16 +685,15 @@ FluidbookLoader.prototype = {
 
         this._preloadContentLinkTextures(page, this.fluidbook.settings.clinks[page], this.fluidbook.settings.links[page], enter, function (textures, clinks) {
             if ($this.fluidbook.pagetransitions.flip3d !== false) {
-                var dh = screen.height * window.devicePixelRatio * 1.1;
-                var dw = $this.fluidbook.settings.width * (dh / $this.fluidbook.settings.height);
-                var c = document.getElementById("pscanvas");
-                c.width = dw;
-                c.height = dh;
-                var ctx = c.getContext("2d");
-                ctx.clearRect(0, 0, dw, dh);
+                let dh = screen.height * window.devicePixelRatio * 1.1;
+                let dw = $this.fluidbook.settings.width * (dh / $this.fluidbook.settings.height);
+                let canvas = $('<canvas class="pscanvas" id="pscanvas_' + page + '" width="' + dw + '" height="' + dh + '" aria-hidden="true"></canvas>');
+                $("body").append(canvas);
+                let c=canvas.get(0);
+                let ctx = c.getContext("2d");
 
-                var wr = dw / $this.fluidbook.settings.width;
-                var hr = dh / $this.fluidbook.settings.height;
+                let wr = dw / $this.fluidbook.settings.width;
+                let hr = dh / $this.fluidbook.settings.height;
 
                 // Draw background
                 if ($this.backgrounds[page] !== undefined && $this.backgrounds[page] !== null) {
@@ -704,7 +703,7 @@ FluidbookLoader.prototype = {
                     ctx.fillRect(0, 0, dw, dh);
                 }
 
-                var afterTexts = function () {
+                let afterTexts = function () {
                     // Draw content links
                     if (clinks !== '') {
                         $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () {
@@ -727,7 +726,7 @@ FluidbookLoader.prototype = {
                             let th;
 
                             if ($(this).is('[data-image]')) {
-                                var i = $(this).data('id');
+                                let i = $(this).data('id');
                                 if (textures[i] === undefined || textures[i] === null) {
                                     return;
                                 }
@@ -755,12 +754,12 @@ FluidbookLoader.prototype = {
                                 sh = th - (sy / (1 - origin[1]));
                             }
 
-                            var left = (parseFloat($(this).css('left'))) * wr;
-                            var top = (parseFloat($(this).css('top'))) * hr;
-                            var width = w * wr;
-                            var height = h * hr;
+                            let left = (parseFloat($(this).css('left'))) * wr;
+                            let top = (parseFloat($(this).css('top'))) * hr;
+                            let width = w * wr;
+                            let height = h * hr;
 
-                            var blendmode = $(this).data('blendmode');
+                            let blendmode = $(this).data('blendmode');
 
                             if (blendmode === 'normal') {
                                 ctx.globalCompositeOperation = 'source-over';
@@ -793,8 +792,8 @@ FluidbookLoader.prototype = {
 
                     // Draw the shadow if necessary
                     if ($this.fluidbook.settings.shadeAlpha > 0) {
-                        var sw = dw * .25;
-                        var s, x;
+                        let sw = dw * .25;
+                        let s, x;
                         if (page % 2 === 0 && $this.fluidbook.l10n.ltr || page % 2 === 1 && $this.fluidbook.l10n.rtl) {
                             // Left
                             s = $this.shadeLeft;
@@ -811,7 +810,7 @@ FluidbookLoader.prototype = {
 
                     try {
                         let dataurl = c.toDataURL("image/png");
-                        var i = new Image();
+                        let i = new Image();
                         i.onload = function () {
                             if (enter) {
                                 $this.textures[page] = i;
@@ -821,6 +820,7 @@ FluidbookLoader.prototype = {
                             callback();
                         }
                         i.src = dataurl;
+                        $(canvas).remove();
                     } catch (e) {
                         console.warn(e);
                         callback();
@@ -835,7 +835,7 @@ FluidbookLoader.prototype = {
                         });
                     } else {
                         try {
-                            var img = $this.texts[page];
+                            let img = $this.texts[page];
                             if (img !== undefined && img !== null) {
                                 img = img.get(0);
                                 if (img.width === 0) {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index fc71df63..d4c3e51a 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2980,7 +2980,7 @@ body > input {
 
 @import "additional.less";
 
-#pscanvas {
+.pscanvas {
   visibility: hidden;
 }
 
-- 
2.39.5