Image Header Remover

/**
 * Removes a header (a specified height from the top) from an image.
 *
 * @param {HTMLImageElement} originalImg The original image object.
 * @param {number} [headerHeight=50] The height in pixels of the header to be removed from the top of the image.
 * @returns {HTMLCanvasElement} A new canvas element containing the image with the top portion removed.
 */
function processImage(originalImg, headerHeight = 50) {
  // Ensure headerHeight is a valid number, clamped between 0 and the image's full height.
  const validHeaderHeight = Math.max(0, Math.min(Number(headerHeight) || 0, originalImg.height));

  // Caclulate the new dimensions for the canvas.
  const newWidth = originalImg.width;
  const newHeight = originalImg.height - validHeaderHeight;

  // Create a new canvas element.
  const canvas = document.createElement('canvas');
  canvas.width = newWidth;
  canvas.height = newHeight;

  // Get the 2D rendering context.
  const ctx = canvas.getContext('2d');

  // Draw the portion of the original image onto the new canvas,
  // effectively cropping off the top part (the header).
  if (newHeight > 0) {
    //
    // ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
    // sx, sy, sWidth, sHeight define the rectangle to be cut from the source image.
    // dx, dy, dWidth, dHeight define where to draw the cut-out on the destination canvas.
    ctx.drawImage(
      originalImg,
      0, // sx: Start at x=0 on the source image.
      validHeaderHeight, // sy: Start below the header on the source image.
      newWidth, // sWidth: The width of the content to copy.
      newHeight, // sHeight: The height of the content to copy.
      0, // dx: Place the copied content at x=0 on the new canvas.
      0, // dy: Place the copied content at y=0 on the new canvas.
      newWidth, // dWidth: Draw with the original width.
      newHeight // dHeight: Draw with the new calculated height.
    );
  }

  // Return the new canvas. If the new height is 0, it will be a 0-height canvas.
  return canvas;
}