for (let y = 0; y < height; y += fontHeight) {
  for (let x = 0; x < width; x += fontWidth) {
    const frameSection = hiddenContext.getImageData(x, y, fontWidth, fontHeight);
    const { r, g, b } = getAverageRGB(frameSection);

    outputContext.fillStyle = `rgb(${r},${g},${b})`;
    outputContext.fillText('@', x, y);
  }
}