Notes

// **Step 7: Calculate dimensions for the PDF (A4 size)**
const canvasWidthPx = canvas.width;
const canvasHeightPx = canvas.height;
const pxToPt = 72 / 96; // Conversion factor from pixels to points

// Set the A4 dimensions in points
const a4WidthPt = 595.28;
const a4HeightPt = 841.89;

// Calculate proportional scaling to fit content in A4 without stretching
let pdfWidth, pdfHeight;
if (canvasWidthPx > canvasHeightPx) { // Landscape orientation
pdfWidth = a4HeightPt; // Swap for landscape
pdfHeight = a4WidthPt;
} else { // Portrait orientation
pdfWidth = a4WidthPt;
pdfHeight = a4HeightPt;
}

// Calculate the scaling factor to maintain aspect ratio
const widthRatio = pdfWidth / (canvasWidthPx * pxToPt);
const heightRatio = pdfHeight / (canvasHeightPx * pxToPt);
const scale = Math.min(widthRatio, heightRatio); // Use the smaller ratio to fit

// Calculate final scaled dimensions
const imgWidth = canvasWidthPx * pxToPt * scale;
const imgHeight = canvasHeightPx * pxToPt * scale;

// Center the image on the page
const xOffset = (pdfWidth - imgWidth) / 2;
const yOffset = (pdfHeight - imgHeight) / 2;

// **Step 8: Create a new PDF document and add an A4 page**
const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage([pdfWidth, pdfHeight]);

// **Step 9: Register fontkit and embed the custom font**
pdfDoc.registerFontkit(fontkit);
const customFont = await pdfDoc.embedFont(brandonTextBase64Regular);

// **Step 10: Embed the image into the PDF**
const pngImage = await pdfDoc.embedPng(imgData);
page.drawImage(pngImage, {
x: xOffset,
y: yOffset,
width: imgWidth,
height: imgHeight,
});

// **Save and download the PDF document**
const pdfBytes = await pdfDoc.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'a4_document.pdf';
link.click();