apps/web/test1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="
        default-src 'self' 'unsafe-inline' blob: data: resource: https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js;
        object-src 'self' blob: data:;
        frame-src 'self' blob: data:;
      "
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/apps/web/index.css" />
    <title>Test 1</title>
    <script type="text/javascript" src="/dist/pdf-lib.js"></script>
    <script type="text/javascript" src="/apps/web/utils.js"></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js"
    ></script>
  </head>

  <body>
    <div id="button-container">
      <button disabled>Prev</button>
      <button onclick="test()">Run Test</button>
      <button onclick="window.location.href = '/apps/web/test2.html'">
        Next
      </button>
    </div>
    <div id="animation-target"></div>
    <iframe id="iframe"></iframe>
  </body>

  <script type="text/javascript">
    startFpsTracker('animation-target');

    const fetchBinaryAsset = (asset) =>
      fetch(`/assets/${asset}`).then((res) => res.arrayBuffer());

    const fetchStringAsset = (asset) =>
      fetch(`/assets/${asset}`).then((res) => res.text());

    const renderInIframe = (pdfBytes) => {
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const blobUrl = URL.createObjectURL(blob);
      document.getElementById('iframe').src = blobUrl;
    };

    const ipsumLines = [
      'Eligendi est pariatur quidem in non excepturi et.',
      'Consectetur non tenetur magnam est corporis tempor.',
      'Labore nisi officiis quia ipsum qui voluptatem omnis.',
    ];

    // This test creates a new PDF document and inserts pages to it.
    // Each page is testing different features of pdf-lib.
    async function test() {
      const {
        clip,
        clipEvenOdd,
        closePath,
        cmyk,
        degrees,
        drawRectangle,
        endPath,
        grayscale,
        LineCapStyle,
        setLineJoin,
        LineJoinStyle,
        typedArrayFor,
        lineTo,
        moveTo,
        PDFDocument,
        popGraphicsState,
        pushGraphicsState,
        rgb,
        StandardFonts,
        AFRelationship,
      } = PDFLib;

      const pdfDoc = await PDFDocument.create();

      pdfDoc.setTitle('🥚 The Life of an Egg 🍳');
      pdfDoc.setAuthor('Humpty Dumpty');
      pdfDoc.setSubject('📘 An Epic Tale of Woe 📖');
      pdfDoc.setKeywords(['eggs', 'wall', 'fall', 'king', 'horses', 'men']);
      pdfDoc.setProducer('PDF App 9000 🤖');
      pdfDoc.setCreator('PDF App 9000 🤖');
      pdfDoc.setCreationDate(new Date('2018-06-24T01:58:37.228Z'));
      pdfDoc.setModificationDate(new Date('2018-12-21T07:00:11.000Z'));

      pdfDoc.registerFontkit(fontkit);

      await pdfDoc.attach(
        await fetchBinaryAsset('images/greyscale_bird.png'),
        'bird.png',
        {
          mimeType: 'image/png',
          description: 'A bird in greyscale 🐦',
          creationDate: new Date('2006/06/06'),
          modificationDate: new Date('2007/07/07'),
          afRelationship: AFRelationship.Data,
        },
      );

      const csvString = [
        'Year,Make,Model',
        '1997,Ford,E350',
        '2000,Mercury,Cougar',
      ].join('\n');
      await pdfDoc.attach(typedArrayFor(csvString), 'cars.csv', {
        mimeType: 'text/csv',
        description: 'Some car info 🚗',
        creationDate: new Date('2000/01/13'),
        modificationDate: new Date('2012/12/12'),
        afRelationship: AFRelationship.Unspecified,
      });

      const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman);

      const size = 750;

      pdfDoc.addJavaScript(
        'main',
        'console.show(); console.println("Hello World!")',
      );

      /********************** Page 1 **********************/

      // This page tests different drawing operations as well as adding custom
      // operators to the page content.

      const page1 = pdfDoc.addPage([size, size]);

      // Upper-left Quadrant
      page1.moveTo(0, size / 2);
      page1.drawSquare({ size: size / 2, color: rgb(1, 0, 0) });
      page1.pushOperators(
        pushGraphicsState(),
        moveTo(0, size / 2),
        lineTo(0, size),
        lineTo(size / 2, size),
        closePath(),
        clip(),
        endPath(),
        ...drawRectangle({
          x: size / 8,
          y: size / 2 + size / 8,
          width: size / 4,
          height: size / 4,
          borderWidth: 50,
          borderColor: rgb(1, 1, 0),
          rotate: degrees(0),
          xSkew: degrees(0),
          ySkew: degrees(0),
          color: undefined,
        }),
        popGraphicsState(),
      );

      // Upper-right quadrant
      page1.pushOperators(pushGraphicsState());
      page1.moveTo(size / 2, size / 2);
      page1.drawSquare({ size: size / 2, color: rgb(0, 1, 0) });
      page1.drawEllipse({
        x: size / 2 + size / 4,
        y: size / 2 + size / 4,
        xScale: 25,
        yScale: 150,
        color: rgb(255 / 255, 153 / 255, 51 / 255),
        borderWidth: 2,
        borderColor: rgb(0, 1, 1),
        borderDashArray: [10],
      });
      page1.drawEllipse({
        x: size / 2 + size / 4,
        y: size / 2 + size / 4,
        xScale: 75,
        yScale: 50,
        color: undefined,
      });
      page1.drawEllipse({
        x: size / 2 + size / 4,
        y: size / 2 + size / 4,
        xScale: 150,
        yScale: 100,
        color: undefined,
      });
      page1.pushOperators(clipEvenOdd(), endPath());
      page1.setFont(timesRomanFont);
      page1.setFontColor(rgb(1, 0, 1));
      page1.setFontSize(32);
      page1.setLineHeight(32);
      page1.moveTo(size / 2 + 5, size - 5 - 25);
      page1.drawText(
        [...ipsumLines, ...ipsumLines, ...ipsumLines, ...ipsumLines].join('\n'),
      );
      page1.pushOperators(popGraphicsState());

      // Lower-left quadrant
      page1.moveTo(0, 0);
      page1.drawSquare({ size: size / 2, color: cmyk(1, 0, 0, 0) });
      page1.drawCircle({
        x: size / 4,
        y: size / 4,
        size: 150,
        borderWidth: 10,
        borderDashArray: [25],
        borderDashPhase: 25,
        borderColor: cmyk(0, 1, 0, 0),
        borderLineCap: LineCapStyle.Round,
      });

      page1.drawLine({
        start: {
          x: size / 4,
          y: size / 4,
        },
        end: {
          x: size / 4 + 100,
          y: size / 4 + 100,
        },
        color: rgb(0, 1, 0),
        thickness: 3,
        dashArray: [12, 6],
        lineCap: LineCapStyle.Round,
      });

      // Lower-right quadrant
      page1.moveTo(size / 2, 0);
      page1.drawSquare({ size: size / 2, color: grayscale(0.8) });
      page1.pushOperators(
        pushGraphicsState(),
        setLineJoin(LineJoinStyle.Round),
      );
      page1.drawSquare({
        x: size / 2 + size / 4,
        y: 25,
        size: size / 2.25 - 2 * 50,
        rotate: degrees(45),
        borderColor: grayscale(0.6),
        borderWidth: 15,
      });
      page1.pushOperators(setLineJoin(LineJoinStyle.Bevel));
      page1.drawSquare({
        x: size / 2 + 54,
        y: size / 4 + 1,
        size: size / 2.25 - 2 * 100,
        rotate: degrees(-45),
        xSkew: degrees(45 / 2),
        ySkew: degrees(45 / 2),
        color: grayscale(1),
        borderColor: grayscale(0),
        borderWidth: 15,
      });
      page1.pushOperators(popGraphicsState());

      // Middle
      const squareSize = 40;
      page1.drawSquare({
        x: size / 2 - squareSize / 2,
        y: size / 2 - squareSize / 2,
        size: squareSize,
        borderWidth: 2,
        borderColor: rgb(1, 0, 1),
        borderDashArray: [2, 4],
      });

      const rectangleSizeX = 60;
      const rectangleSizeY = 50;
      page1.drawRectangle({
        x: size / 2 - rectangleSizeX / 2,
        y: size / 2 - rectangleSizeY / 2,
        width: rectangleSizeX,
        height: rectangleSizeY,
        borderWidth: 2,
        borderColor: rgb(1, 1, 1),
        borderDashArray: [4, 8],
      });

      /********************** Page 2 **********************/

      // This page tests placement of text with different fonts

      const page2 = pdfDoc.addPage([size, size]);

      page2.drawSquare({ size, color: rgb(253 / 255, 246 / 255, 227 / 255) });
      page2.setFontColor(rgb(101 / 255, 123 / 255, 131 / 255));

      const [
        ubuntuBase64,
        fantasqueBytes,
        indieFlowerBytes,
        greatVibesBytes,
        appleStormBytes,
        bioRhymeBytes,
        pressStart2PBytes,
        hussar3DBytes,
      ] = await Promise.all([
        fetchStringAsset('fonts/ubuntu/Ubuntu-R.ttf.base64'),
        fetchBinaryAsset(
          'fonts/fantasque/OTF/FantasqueSansMono-BoldItalic.otf',
        ),
        fetchBinaryAsset('fonts/indie_flower/IndieFlower.ttf'),
        fetchBinaryAsset('fonts/great_vibes/GreatVibes-Regular.ttf'),
        fetchBinaryAsset('fonts/apple_storm/AppleStormCBo.otf'),
        fetchBinaryAsset('fonts/bio_rhyme/BioRhymeExpanded-Regular.ttf'),
        fetchBinaryAsset('fonts/press_start_2p/PressStart2P-Regular.ttf'),
        fetchBinaryAsset('fonts/hussar_3d/Hussar3DFour.otf'),
      ]);

      const ubuntuFont = await pdfDoc.embedFont(ubuntuBase64, { subset: true });
      page2.drawText(ipsumLines.join('\n'), {
        y: size - 20,
        size: 20,
        font: ubuntuFont,
        lineHeight: 20,
      });

      const fantasqueFont = await pdfDoc.embedFont(fantasqueBytes);
      page2.drawText(ipsumLines.join('\n'), {
        y: size - 105,
        size: 25,
        font: fantasqueFont,
        lineHeight: 25,
      });

      const indieFlowerFont = await pdfDoc.embedFont(indieFlowerBytes, {
        subset: true,
      });
      page2.drawText(ipsumLines.join('\n'), {
        y: size - 200,
        size: 25,
        font: indieFlowerFont,
        lineHeight: 25,
      });

      const greatVibesFont = await pdfDoc.embedFont(greatVibesBytes, {
        subset: true,
      });
      page2.drawText(ipsumLines.join('\n'), {
        y: size - 300,
        size: 30,
        font: greatVibesFont,
        lineHeight: 30,
      });

      const appleStormFont = await pdfDoc.embedFont(appleStormBytes);
      page2.drawText(ipsumLines.join('\n'), {
        y: size - 425,
        size: 25,
        font: appleStormFont,
        lineHeight: 25,
      });

      const bioRhymeFont = await pdfDoc.embedFont(bioRhymeBytes, {
        subset: true,
      });
      page2.drawText(ipsumLines.join('\n'), {
        y: size - 500,
        size: 15,
        font: bioRhymeFont,
        lineHeight: 15,
      });

      const pressStart2PFont = await pdfDoc.embedFont(pressStart2PBytes, {
        subset: true,
      });
      page2.drawText(ipsumLines.join('\n'), {
        y: size - 575,
        size: 15,
        font: pressStart2PFont,
        lineHeight: 15,
      });

      const hussar3DFont = await pdfDoc.embedFont(hussar3DBytes);
      page2.drawText(ipsumLines.join('\n'), {
        y: size - 650,
        size: 25,
        font: hussar3DFont,
        lineHeight: 25,
      });

      /********************** Page 3 **********************/

      // This page tests embedding and placing different images.

      const page3Height = 1750;
      const page3 = pdfDoc.addPage([size, page3Height]);

      const [
        catRidingUnicornBase64,
        minionsLaughingBytes,
        greyscaleBirdBase64,
        minionsBananaAlphaBytes,
        minionsBananaNoAlphaBytes,
        smallMarioBytes,
      ] = await Promise.all([
        fetchStringAsset('images/cat_riding_unicorn.jpg.base64'),
        fetchBinaryAsset('images/minions_laughing.jpg'),
        fetchStringAsset('images/greyscale_bird.png.base64.uri'),
        fetchBinaryAsset('images/minions_banana_alpha.png'),
        fetchBinaryAsset('images/minions_banana_no_alpha.png'),
        fetchBinaryAsset('images/small_mario.png'),
      ]);

      const catRidingUnicornImage = await pdfDoc.embedJpg(
        catRidingUnicornBase64,
      );
      const minionsLaughingImage = await pdfDoc.embedJpg(minionsLaughingBytes);
      const greyscaleBirdImage = await pdfDoc.embedPng(greyscaleBirdBase64);
      const minionsBananaAlphaImage = await pdfDoc.embedPng(
        minionsBananaAlphaBytes,
      );
      const minionsBananaNoAlphaImage = await pdfDoc.embedPng(
        minionsBananaNoAlphaBytes,
      );
      const smallMarioImage = await pdfDoc.embedPng(smallMarioBytes);

      const catRidingUnicornDims = catRidingUnicornImage.scale(0.2);
      const minionsLaughingDims = minionsLaughingImage.scale(0.75);
      const greyscaleBirdDims = greyscaleBirdImage.scale(0.75);
      const minionsBananaAlphaDims = minionsBananaAlphaImage.scale(0.5);
      const minionsBananaNoAlphaDims = minionsBananaNoAlphaImage.scale(0.5);
      const smallMarioDims = smallMarioImage.scale(0.18);

      // const {
      //   setTextRenderingMode,
      //   setStrokingColor,
      //   TextRenderingMode,
      // } = PDFLib;
      // page3.pushOperators(
      //   setTextRenderingMode(TextRenderingMode.OutlineAndClip),
      //   setStrokingColor(rgb(0.5, 0.5, 0.5)),
      // );
      // page3.drawText('Unicornz!', {
      //   x: 75,
      //   y: page3Height - catRidingUnicornDims.height + 75,
      //   font: ubuntuFont,
      //   size: 50,
      // });
      // page3.pushOperators(clip(), endPath());

      page3.moveTo(0, 0);
      page3.drawRectangle({
        width: minionsBananaAlphaDims.width,
        height:
          minionsBananaAlphaDims.height +
          minionsBananaNoAlphaDims.height +
          smallMarioDims.height,
        color: rgb(0, 1, 0),
      });

      page3.moveTo(0, page3Height);
      page3.moveDown(catRidingUnicornDims.height);
      page3.drawImage(catRidingUnicornImage, catRidingUnicornDims);

      page3.moveDown(minionsLaughingDims.height);
      page3.drawImage(minionsLaughingImage, minionsLaughingDims);

      page3.moveDown(greyscaleBirdDims.height);
      page3.drawImage(greyscaleBirdImage, greyscaleBirdDims);

      page3.moveDown(minionsBananaAlphaDims.height);
      page3.drawImage(minionsBananaAlphaImage, minionsBananaAlphaDims);

      page3.moveDown(minionsBananaNoAlphaDims.height);
      page3.drawImage(minionsBananaNoAlphaImage, minionsBananaNoAlphaDims);

      page3.moveDown(smallMarioDims.height);
      page3.drawImage(smallMarioImage, smallMarioDims);

      /********************** Page 4 **********************/

      // This page tests embedding other PDF pages. First we embed page 3 of
      // this document but rotate and scale it. Then we take an external PDF
      // document and embed two pages of it next to each other.

      const page4 = pdfDoc.addPage([size, size]);

      const embeddedPage3 = await pdfDoc.embedPage(page3);
      page4.drawPage(embeddedPage3, {
        x: 10,
        y: size - 10,
        xScale: 1.52,
        yScale: 0.42,
        rotate: degrees(-90),
      });

      const [normalPdfBytes] = await Promise.all([
        fetchBinaryAsset('pdfs/normal.pdf'),
      ]);

      const [
        embeddedPage1,
        embeddedPage2,
      ] = await pdfDoc.embedPdf(normalPdfBytes, [0, 1]);
      page4.drawPage(embeddedPage1, {
        x: 40,
        y: 100,
        xScale: 0.5,
        yScale: 0.5,
        opacity: 0.5,
      });
      page4.drawPage(embeddedPage2, {
        x: 400,
        y: 100,
        xScale: 0.5,
        yScale: 0.5,
      });

      /********************** Page 5 **********************/

      // This page tests creating new AcroForm fields.

      const pastels = {
        greyishGreen: rgb(85 / 255, 117 / 255, 113 / 255),
        brownish: rgb(212 / 255, 154 / 255, 137 / 255),
        tan: rgb(247 / 255, 209 / 255, 186 / 255),
        whiteish: rgb(244 / 255, 244 / 255, 244 / 255),
        lightBlue: rgb(221 / 255, 243 / 255, 245 / 255),
        blue: rgb(166 / 255, 220 / 255, 239 / 255),
        pinkish: rgb(242 / 255, 170 / 255, 170 / 255),
        hotPink: rgb(227 / 255, 99 / 255, 135 / 255),
        yellow: rgb(250 / 255, 240 / 255, 175 / 255),
        darkBlue: rgb(7 / 255, 104 / 255, 159 / 255),
      };

      const page5 = pdfDoc.addPage([size, size]);

      const form = pdfDoc.getForm();

      const fWidth = 100;
      const fHeight = 50;
      const fPadding = 25;
      const fMax = Math.max(fWidth, fHeight);

      // Text Fields
      [
        { name: 'moi.text.field[0]', text: 'Foo', font: ubuntuFont },
        { name: 'moi.text.field[1]', text: 'Bar' },
        { name: 'moi.text.field[2]', text: 'Qux', font: ubuntuFont },
        { name: 'moi.text.field[3]', text: 'Baz' },
      ].forEach(({ name, text, font }, idx) => {
        const textField = form.createTextField(name);
        textField.setText(text);
        textField.addToPage(page5, {
          x: fPadding + fWidth,
          y: size - fMax - fPadding,
          width: fWidth,
          height: fHeight,
          rotate: degrees(90 * idx),
          borderWidth: 4,
          backgroundColor: pastels.pinkish,
          borderColor: pastels.blue,
          textColor: pastels.whiteish,
          font: ubuntuFont,
        });
        if (font) textField.updateAppearances(font);
      });

      // Buttons
      [
        { name: 'moi.button.field[0]', text: 'Earth', font: ubuntuFont },
        { name: 'moi.button.field[1]', text: 'Mars', font: timesRomanFont },
        { name: 'moi.button.field[2]', text: 'Venus', font: ubuntuFont },
        { name: 'moi.button.field[3]', text: 'Saturn', font: timesRomanFont },
      ].forEach(({ name, text, font }, idx) => {
        const button = form.createButton(name);
        button.addToPage(text, page5, {
          x: fPadding * 2 + fWidth * 3,
          y: size - fMax - fPadding,
          width: fWidth,
          height: fHeight,
          rotate: degrees(90 * idx),
          borderWidth: 4,
          backgroundColor: pastels.brownish,
          borderColor: pastels.tan,
          textColor: pastels.greyishGreen,
          font,
        });
      });

      // Dropdowns
      [
        { name: 'moi.dropdown.field[0]', choice: 'Exia', font: ubuntuFont },
        {
          name: 'moi.dropdown.field[1]',
          choice: 'Kyrios',
          font: timesRomanFont,
        },
        { name: 'moi.dropdown.field[2]', choice: 'Dynames', font: ubuntuFont },
        {
          name: 'moi.dropdown.field[3]',
          choice: 'Virtue',
          font: timesRomanFont,
        },
      ].forEach(({ name, choice, font }, idx) => {
        const dropdown = form.createDropdown(name);
        dropdown.addOptions(['Exia', 'Dynames', 'Kyrios', 'Virtue']);
        dropdown.select(choice);
        dropdown.addToPage(page5, {
          x: fPadding * 3 + fWidth * 5,
          y: size - fMax - fPadding,
          width: fWidth,
          height: fHeight,
          rotate: degrees(90 * idx),
          borderWidth: 4,
          backgroundColor: pastels.greyishGreen,
          borderColor: pastels.hotPink,
          textColor: pastels.brownish,
          font,
        });
      });

      // Check Boxes
      [
        { name: 'moi.checkBox.field[0]' },
        { name: 'moi.checkBox.field[1]' },
        { name: 'moi.checkBox.field[2]' },
        { name: 'moi.checkBox.field[3]' },
      ].forEach(({ name }, idx) => {
        const checkBox = form.createCheckBox(name);
        checkBox.check();
        checkBox.addToPage(page5, {
          x: fPadding + fWidth,
          y: size - fMax * 3 - fPadding * 2,
          width: fHeight,
          height: fHeight,
          rotate: degrees(90 * idx),
          borderWidth: 4,
          backgroundColor: pastels.whiteish,
          borderColor: pastels.greyishGreen,
          textColor: pastels.hotPink,
        });
      });

      // Option Lists
      [
        {
          name: 'moi.optionList.field[0]',
          choice: 'TypeScript',
          font: ubuntuFont,
        },
        {
          name: 'moi.optionList.field[1]',
          choice: 'Kotlin',
          font: timesRomanFont,
        },
        { name: 'moi.optionList.field[2]', choice: 'Python', font: ubuntuFont },
        {
          name: 'moi.optionList.field[3]',
          choice: 'Swift',
          font: timesRomanFont,
        },
      ].forEach(({ name, choice, font }, idx) => {
        const optionList = form.createOptionList(name);
        optionList.addOptions(['TypeScript', 'Kotlin', 'Python', 'Swift']);
        optionList.select(choice);
        optionList.addToPage(page5, {
          x: fPadding * 2 + fWidth * 3,
          y: size - fMax * 3 - fPadding * 2,
          width: fWidth,
          height: fHeight,
          rotate: degrees(90 * idx),
          borderWidth: 4,
          backgroundColor: pastels.tan,
          borderColor: pastels.yellow,
          textColor: pastels.hotPink,
          font,
        });
      });

      // Radio Group
      const radioGroup = form.createRadioGroup('moi.radioGroup.field[0]');

      [
        { option: 'Bing' },
        { option: 'Boing' },
        { option: 'Bang' },
        { option: 'Bloop' },
      ].forEach(({ option }, idx) => {
        radioGroup.addOptionToPage(option, page5, {
          x: fPadding * 3 + fWidth * 5,
          y: size - fMax * 3 - fPadding * 2,
          width: fHeight,
          height: fHeight,
          rotate: degrees(90 * idx),
          borderWidth: 4,
          backgroundColor: pastels.blue,
          borderColor: pastels.pinkish,
          textColor: pastels.yellow,
        });
      });

      radioGroup.select('Bing');

      // Combed Text Field
      const combedTf = form.createTextField('moi.combed.text.field');
      combedTf.setMaxLength(7);
      combedTf.enableCombing();
      combedTf.setText('ABC-123');
      combedTf.addToPage(page5, {
        x: fPadding + fWidth / 2,
        y: size - fMax * 5 - fPadding * 3,
        width: fWidth * 2.5,
        height: fHeight,
        borderWidth: 4,
        backgroundColor: pastels.yellow,
        borderColor: pastels.brownish,
        textColor: pastels.darkBlue,
        font: ubuntuFont,
      });

      // Multiline Text Field
      const multilineTf = form.createTextField('moi.multiline.text.field');
      multilineTf.enableMultiline();
      multilineTf.setText(
        `In the morning, when you can't get out of bed, tell yourself: "I'm getting up to do the work only a man can do. How can I possibly hesitate or complain when I'm about to accomplish the task for which I was born? Was I made for lying warm in bed under a pile of blankets?"\n\n"But I enjoy it here."\n\nWas it for enjoyment you were born? Are you designed to act or to be acted upon?\n\n\t\t\t\t\t\t\t\t\t\t - Marcus Aurelius`,
      );
      multilineTf.addToPage(page5, {
        x: fPadding * 3 + fWidth / 2 + fWidth * 2.5,
        y: size - fMax * 5 - fPadding * 3 - fHeight * 3,
        width: fWidth * 2.5,
        height: fHeight * 5,
        borderWidth: 4,
        backgroundColor: pastels.whiteish,
        borderColor: pastels.brownish,
        textColor: pastels.greyishGreen,
        font: ubuntuFont,
      });

      page5.drawText(
        'There should be no remnant of a field\nbelow this text!!',
        {
          y: size - fMax * 5 - fPadding * 0 - fHeight * 3,
          x: fPadding,
          size: 18,
          font: indieFlowerFont,
          lineHeight: 18,
        },
      );
      const textField = form.createTextField('a.new.text.field');
      textField.setText('This Should Not Be Visible');
      textField.addToPage(page5, {
        x: fPadding,
        y: size - fMax * 5 - fPadding * 3.5 - fHeight * 3,
        width: fWidth * 2.5,
        height: fHeight * 1,
        borderWidth: 4,
        backgroundColor: pastels.pinkish,
        borderColor: pastels.blue,
        textColor: pastels.darkBlue,
        font: ubuntuFont,
      });

      form.removeField(textField);

      /********************** Print Metadata **********************/

      console.log('Title:', pdfDoc.getTitle());
      console.log('Author:', pdfDoc.getAuthor());
      console.log('Subject:', pdfDoc.getSubject());
      console.log('Creator:', pdfDoc.getCreator());
      console.log('Keywords:', pdfDoc.getKeywords());
      console.log('Producer:', pdfDoc.getProducer());
      console.log('Creation Date:', pdfDoc.getCreationDate());
      console.log('Modification Date:', pdfDoc.getModificationDate());

      /********************** Export PDF **********************/

      const pdfBytes = await pdfDoc.save();

      renderInIframe(pdfBytes);
    }
  </script>
</html>