Cozy Photo Filter Tool

function processImage(originalImg, sepiaAmount = 0.2, saturationAdjust = 0.9, brightnessAdjust = 1.05, contrastAdjust = 0.95) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // It's assumed that originalImg is a fully loaded HTMLImageElement or similar drawable source.
  // Use its intrinsic width and height for the canvas.
  // For an HTMLImageElement, .width and .height give rendered dimensions,
  // while .naturalWidth and .naturalHeight give intrinsic dimensions.
  // If originalImg comes from `new Image()`, .width and .height are intrinsic after load.
  // We'll prioritize natural dimensions if available, otherwise use .width/.height.
  const imgWidth = originalImg.naturalWidth || originalImg.width;
  const imgHeight = originalImg.naturalHeight || originalImg.height;

  canvas.width = imgWidth;
  canvas.height = imgHeight;

  // Construct the filter string for the "cozy" effect.
  // The order of CSS filters can sometimes affect the final outcome.
  // A common sequence is to adjust basic properties like brightness/contrast,
  // then color properties like saturation, and finally stylistic effects like sepia.
  // - brightnessAdjust: Makes the image brighter (e.g., 1.05 for 105%).
  // - contrastAdjust: Affects the difference between light and dark areas (e.g., 0.95 for 95%).
  // - saturationAdjust: Changes color intensity (e.g., 0.9 for 90% saturation, slightly muted).
  // - sepiaAmount: Adds a warm, brownish tone (e.g., 0.2 for 20% sepia effect).
  const filterString = `brightness(${brightnessAdjust}) contrast(${contrastAdjust}) saturate(${saturationAdjust}) sepia(${sepiaAmount})`;
  
  if (ctx) {
    // Apply the combined filter string to the canvas context.
    ctx.filter = filterString;
    
    // Draw the original image onto the canvas.
    // The filter defined on the context will be applied during this drawing operation.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    
    // Reset filter for other potential drawings on this context if it were reused elsewhere,
    // though here we return the canvas directly.
    // ctx.filter = 'none'; // Not strictly necessary here as canvas is new and returned.
  } else {
    // This case would typically occur in non-browser environments or if Canvas API is disabled.
    console.error("Canvas 2D context is not available. Returning an empty canvas.");
  }

  return canvas;
}