diff --git a/package-lock.json b/package-lock.json
index f1f4ad758..f3a3e8f90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "magic-string": "^0.27.0",
         "npm-run-all": "^4.1.5",
         "open-cli": "^7.1.0",
-        "pixi.js": "^8.0.0-X",
+        "pixi.js": "8.0.0-rc.4",
         "pre-commit": "^1.2.2",
         "rimraf": "^4.1.1",
         "tslib": "^2.0.3",
@@ -14896,9 +14896,9 @@
       }
     },
     "node_modules/pixi.js": {
-      "version": "8.0.0-rc.5",
-      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.0.0-rc.5.tgz",
-      "integrity": "sha512-Xm3aPFzn6M8pYFeLr4J9kjl/PwTEz725OlBO6fyPXUXpDRl5h9nMSMeAaZhs4aq34Lck6a3HqxO+CBTZAuxpfg==",
+      "version": "8.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.0.0-rc.4.tgz",
+      "integrity": "sha512-6Eyas36GrJCfR7UCZmSp4P4s49BqgQDE98EfJyZ1fjPMjREBjquTva2tJT9jMglfvqaA5HoA0OB6Rn5tV15h0A==",
       "dev": true,
       "dependencies": {
         "@pixi/colord": "^2.9.6",
diff --git a/package.json b/package.json
index 6bd291075..19bda928b 100644
--- a/package.json
+++ b/package.json
@@ -240,7 +240,7 @@
     "magic-string": "^0.27.0",
     "npm-run-all": "^4.1.5",
     "open-cli": "^7.1.0",
-    "pixi.js": "^8.0.0-X",
+    "pixi.js": "8.0.0-rc.4",
     "pre-commit": "^1.2.2",
     "rimraf": "^4.1.1",
     "tslib": "^2.0.3",
diff --git a/scripts/screenshots/index.html b/scripts/screenshots/index.html
index 47f5794bc..f8382b971 100644
--- a/scripts/screenshots/index.html
+++ b/scripts/screenshots/index.html
@@ -9,11 +9,19 @@
         padding: 0;
         width: 100vw; 
         height: 100vh;
-        background-color: #000000;
-        overflow: hidden;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        background-image:
+          linear-gradient(45deg, #ccc 25%, transparent 25%), 
+          linear-gradient(135deg, #ccc 25%, transparent 25%),
+          linear-gradient(45deg, transparent 75%, #ccc 75%),
+          linear-gradient(135deg, transparent 75%, #ccc 75%);
+        background-size:25px 25px; /* Must be a square */
+        background-position:0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+      }
+      img, canvas {
+        width: 100%;
+        display: block;
       }
     </style>
   </head>
diff --git a/scripts/screenshots/renderer.js b/scripts/screenshots/renderer.js
index 1b5d63ce3..aa5b555d0 100644
--- a/scripts/screenshots/renderer.js
+++ b/scripts/screenshots/renderer.js
@@ -27,6 +27,7 @@ app.init({
     backgroundColor: outputOptions.border.color,
     autoStart: false,
     preference: 'webgl',
+    hello: true,
 }).then(() =>
 {
     const frames = {};
@@ -70,7 +71,6 @@ app.init({
         preview.addChild(bg, fishes);
 
         app.stage.addChild(preview);
-        document.body.appendChild(app.canvas);
         next();
     });
 
@@ -144,6 +144,9 @@ app.init({
             {
                 app.render();
                 const base64 = await app.renderer.extract.base64(app.stage);
+                const img = new Image();
+                img.src = base64;
+                document.body.appendChild(img);
 
                 // Save image
                 base64ToImage(
@@ -158,6 +161,7 @@ app.init({
             {
                 app.render();
                 const canvas = app.renderer.extract.canvas(app.stage);
+                document.body.appendChild(canvas);
                 const context = canvas.getContext('2d');
 
                 context.scale(1, -1);