diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4cc3db7..3d2d482 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 2024-08-30
+
+###  🐛 Bug fixes
+
+- Fixed an issue where depending on the source PDF, sometimes the cards would not have all the art they should have and instead showed black boxes or other artifacts. This was likely due to the used PDF render library not rendering all the content when only a part of the page was requested to render. Now, the whole page is rendered out once and then only parts of the rendered image are used for the cards. This seems to have fixed the issue.
+
 ## 2024-06-07
 
 ### ✨ Improvements
diff --git a/README.md b/README.md
index 86084a5..2bd3a3e 100644
--- a/README.md
+++ b/README.md
@@ -5,8 +5,6 @@
 [![BGG Thread](https://img.shields.io/badge/BGG-Thread-purple?logo=boardgamegeek)](https://boardgamegeek.com/thread/3298313/i-created-a-tool-to-create-foldable-card-pdfs-from)
 [![BGG Geeklist](https://img.shields.io/badge/BGG-Geeklist-purple?logo=boardgamegeek)](https://boardgamegeek.com/geeklist/336986/cardfoldr-settings-for-games)
 
-
-
 CardFoldr is a tool to help you convert a PDF of card grids (say, 3x3 cards per page, several pages of fronts and one page of backs) into a gutterfold PDF: card fronts and backs on the same page, with a foldline down the middle for easy double sided alignment.
 
 It is meant to help with building print'n'play games.
diff --git a/src/assets/cardfoldr.js b/src/assets/cardfoldr.js
index a987b63..da3f0b3 100644
--- a/src/assets/cardfoldr.js
+++ b/src/assets/cardfoldr.js
@@ -477,7 +477,8 @@ const extractCards = async () => {
     for (let p = 0; p < (backLoc === "lastpage" ? pageSelection.length - 1 : pageSelection.length); p = p + ((backLoc === "duplex" || backLoc === "duplex2") ? 2 : 1)) {
         const page = await pdf.getPage(pageSelection[p]);
         const mmFactor = page.userUnit / 72 * 25.4 / scale;
-        const viewport = page.getViewport({ scale: scale });
+
+        const pageCanvas = await drawPage(page, scale);
 
         for (let y = 0; y < countY; y++) {
             for (let x = 0; x < countX; x++) {
@@ -487,7 +488,7 @@ const extractCards = async () => {
 
                 const ctx = canvas.getContext('2d');
                 ctx.translate(-1 * (startX + x * width + x * marginX) / mmFactor, -1 * (startY + y * height + y * marginY) / mmFactor);
-                await page.render({ canvasContext: ctx, viewport }).promise;
+                ctx.drawImage(pageCanvas, 0, 0);
 
                 const cardImage = document.createElement('img');
                 cardImage.src = canvas.toDataURL(mimeType);
@@ -532,7 +533,8 @@ const extractCards = async () => {
             backsPage = await backgroundPdf.getPage(backgroundPageSelection[0]);
         }
         const mmFactor = backsPage.userUnit / 72 * 25.4 / scale;
-        const viewport = backsPage.getViewport({ scale: scale });
+
+        const pageCanvas = await drawPage(backsPage, scale);
 
         const canvas = document.createElement('canvas');
         canvas.height = height / mmFactor;
@@ -540,8 +542,7 @@ const extractCards = async () => {
 
         const ctx = canvas.getContext('2d');
         ctx.translate(-1 * startX / mmFactor, -1 * startY / mmFactor);
-
-        await backsPage.render({ canvasContext: ctx, viewport }).promise;
+        ctx.drawImage(pageCanvas, 0, 0);
 
         const src = rotateBacks ? await rotateImage180(canvas.toDataURL(mimeType)) : canvas.toDataURL(mimeType);
 
@@ -556,7 +557,8 @@ const extractCards = async () => {
             for (let y = 0; y < countY; y++) {
                 for (let x = 0; x < countX; x++) {
                     const mmFactor = backPage.userUnit / 72 * 25.4 / scale;
-                    const viewport = backPage.getViewport({ scale: scale });
+
+                    const pageCanvas = await drawPage(backPage, scale);
 
                     const canvas = document.createElement('canvas');
                     canvas.height = height / mmFactor;
@@ -564,8 +566,7 @@ const extractCards = async () => {
 
                     const ctx = canvas.getContext('2d');
                     ctx.translate(-1 * (startX + x * width + x * marginX) / mmFactor, -1 * (startY + y * height + y * marginY) / mmFactor);
-            
-                    await backPage.render({ canvasContext: ctx, viewport }).promise;
+                    ctx.drawImage(pageCanvas, 0, 0);
 
                     const cardImage = document.getElementById(`card-${backCount}`).getElementsByClassName('back')[0];
                     cardImage.src = rotateBacks ? await rotateImage180(canvas.toDataURL(mimeType)) : canvas.toDataURL(mimeType);
@@ -580,7 +581,8 @@ const extractCards = async () => {
         for (let p = 1; p < pageSelection.length; p = p + 2) {
             const backPage = await pdf.getPage(pageSelection[p]);
             const mmFactor = backPage.userUnit / 72 * 25.4 / scale;
-            const viewport = backPage.getViewport({ scale: scale });
+
+            const pageCanvas = await drawPage(backPage, scale);
 
             if (backLoc === "duplex") {
                 for (let y = 0; y < countY; y++) {
@@ -591,9 +593,8 @@ const extractCards = async () => {
 
                         const ctx = canvas.getContext('2d');
                         ctx.translate(-1 * (startX + x * width + x * marginX) / mmFactor, -1 * (startY + y * height + y * marginY) / mmFactor);
+                        ctx.drawImage(pageCanvas, 0, 0);
                 
-                        await backPage.render({ canvasContext: ctx, viewport }).promise;
-
                         const cardImage = document.getElementById(`card-${backCount}`).getElementsByClassName('back')[0];
                         cardImage.src = rotateBacks ? await rotateImage180(canvas.toDataURL(mimeType)) : canvas.toDataURL(mimeType);
                         
@@ -609,8 +610,7 @@ const extractCards = async () => {
 
                         const ctx = canvas.getContext('2d');
                         ctx.translate(-1 * (startX + x * width + x * marginX) / mmFactor, -1 * (startY + y * height + y * marginY) / mmFactor);
-
-                        await backPage.render({ canvasContext: ctx, viewport }).promise;
+                        ctx.drawImage(pageCanvas, 0, 0);
 
                         const cardImage = document.getElementById(`card-${backCount}`).getElementsByClassName('back')[0];
                         cardImage.src = rotateBacks ? canvas.toDataURL(mimeType) : await rotateImage180(canvas.toDataURL(mimeType));