How can I show both div with an empty box or preview of the defined alphabet in the divs on page load?

I am transforming the alphabet on user input by the defined alphabet. It has two div ids to show results #outputText and #imageContainer. #outputText shows transformed text and #imageContainer shows converted text image. Both ids do not show on the page load. it shows results on user input. But I want to show both div with an empty box or preview of the defined alphabet in the divs on page load. This is the code, I tried to achieve by this code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  const inputText = $('#inputText');
  const outputText = $('#outputText');
  const imageContainer = $('#imageContainer');
  const fontSizeInput = $('#fontSize');
  const fontColorInput = $('#fontColor');
  const backgroundColorInput = $('#backgroundColor');
  const fontWeightSelect = $('#fontWeight');
  const downloadButton = $('#downloadButton');
  const copyButton = $('#copyButton');
  inputText.on('input', generateFont);
  fontSizeInput.on('input', generateFont);
  fontColorInput.on('input', generateFont);
  backgroundColorInput.on('input', generateFont);
  fontWeightSelect.on('change', generateFont);
  downloadButton.on('click', downloadImage);
  copyButton.on('click', copyText);

  function generateFont() {
    const text = inputText.val();
    const transformedText = transformText(text);
    outputText.text(transformedText);

    generateImage(transformedText);
  }

  function transformText(text) {
    const alphabet = {
      'A': 'Λ',
      'B': 'ß',
      'C': 'Ͼ',
      'D': 'Ð',
      'E': 'Σ',
      'F': 'Ŧ',
      'G': '₲',
      'H': 'Ή',
      'I': 'ł',
      'J': 'J',
      'K': 'Ҝ',
      'L': 'Ł',
      'M': 'M',
      'N': 'И',
      'O': 'Ø',
      'P': '₱',
      'Q': 'Q',
      'R': 'S',
      'S': 'Ş',
      'T': 'Ŧ',
      'U': 'Ц',
      'V': 'V',
      'W': '₩',
      'X': 'Ж',
      'Y': 'Ψ',
      'Z': 'Z'
    };

    const transformedText = text
      .toUpperCase()
      .split('')
      .map((char) => (alphabet.hasOwnProperty(char) ? alphabet[char] : char))
      .join('');

    return transformedText;
  }

  function generateImage(text) {
    const canvas = $('<canvas>')[0];
    const context = canvas.getContext('2d');
    const fontSize = parseInt(fontSizeInput.val());
    const fontColor = fontColorInput.val();
    const backgroundColor = backgroundColorInput.val();
    const fontWeight = fontWeightSelect.val();

    context.font = `${fontWeight} ${fontSize}px "Courier New", Courier, monospace`;
    const textWidth = context.measureText(text).width;
    const textHeight = fontSize;
    canvas.width = textWidth;
    canvas.height = textHeight;

    context.fillStyle = backgroundColor;
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = fontColor;
    context.font = `${fontWeight} ${fontSize}px "Courier New", Courier, monospace`;
    context.textBaseline = 'middle';
    context.fillText(text, 0, canvas.height / 2);

    const imageElement = $('<img>').attr('src', canvas.toDataURL('image/png'));
    imageContainer.html(imageElement);
  }

  function downloadImage() {
    const imageElement = imageContainer.find('img')[0];
    const link = $('<a>').attr('href', imageElement.src).attr('download', 'cool_font.png')[0];
    link.click();
  }

  function copyText() {
    const transformedText = outputText.text();
    navigator.clipboard.writeText(transformedText)
      .then(() => {
        alert('Text copied to clipboard!');
      })
      .catch((error) => {
        console.error('Error copying text to clipboard:', error);
      });
  }
});

<!-- language: lang-css -->

body {
  text-align: center;
  margin-top: 100px;
}

#inputText {
  font-size: 24px;
  padding: 10px;
}

#outputText {
  font-family: "Courier New", Courier, monospace;
  font-size: 48px;
  margin-top: 20px;
}

#imageContainer {
  margin-top: 20px;
}

.button {
  margin-top: 20px;
}

.option {
  margin-top: 10px;
}

<!-- language: lang-html -->

<h1>Cool Font Generator</h1>
  <input type="text" id="inputText" placeholder="Enter text">
  <div id="outputText"></div>
  <div class="option">
<label for="fontSize">Font Size:</label>
<input type="number" id="fontSize" min="10" max="100" value="48">
  </div>
  <div class="option">
<label for="fontColor">Font Color:</label>
<input type="color" id="fontColor" value="#FFFFFF">
  </div>
  <div class="option">
<label for="backgroundColor">Background Color:</label>
<input type="color" id="backgroundColor" value="#000000">
  </div>
  <div class="option">
<label for="fontWeight">Font Weight:</label>
<select id="fontWeight">
  <option value="normal">Normal</option>
  <option value="bold">Bold</option>
</select>
  </div>

  <div id="imageContainer"></div>

  <button class="button" id="downloadButton">Download Image</button>
  <button class="button" id="copyButton">Copy Text</button>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- end snippet -->

As suggested by @CBroe in the comments, you can add min-height (or height, if you want it to stay one line wide):

<!-- language: lang-css -->

/* ... your css here ... */
#outputText, #imageContainer {
  min-height: 55px; /* or use height: 55px; */
  border: 1px solid black;
}

Here's what it looks like: