Image Shear Distortion Filter

function processImage(originalImg, shearFactorX_str = "0.2", shearFactorY_str = "0.0") {
    let sx_param = parseFloat(shearFactorX_str);
    let sy_param = parseFloat(shearFactorY_str);

    // Use 0.0 if parsing failed (e.g., input was not a valid number string)
    const shearX = isNaN(sx_param) ? 0.0 : sx_param;
    const shearY = isNaN(sy_param) ? 0.0 : sy_param;

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Original image dimensions
    const w = originalImg.width;
    const h = originalImg.height;
    
    // If the image has no dimensions (e.g., not loaded or zero size),
    // return an empty or minimal canvas.
    if (w === 0 || h === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    // Define the transformation matrix coefficients.
    // This specific matrix corresponds to applying a horizontal shear,
    // and then applying a vertical shear to the result.
    // The transformation is:
    //   x_new = x_old + shearX * y_old
    //   y_new = shearY * x_old + (1 + shearX * shearY) * y_old
    //
    // The HTML Canvas `setTransform(a, b, c, d, e, f)` method applies:
    //   x_transformed_coord = a * x_coord + c * y_coord + e
    //   y_transformed_coord = b * x_coord + d * y_coord + f
    //
    // Mapping our desired shear transformation to canvas parameters:
    const a = 1;
    const b = shearY;
    const c = shearX;
    const d = 1 + shearX * shearY;

    // Calculate the coordinates of the four corners of the image
    // after applying the shear transformation (without translation yet).
    // Point (0,0) - top-left corner
    const x0 = 0; // a*0 + c*0
    const y0 = 0; // b*0 + d*0

    // Point (w,0) - top-right corner
    const x1 = a * w + c * 0; // w
    const y1 = b * w + d * 0; // shearY * w

    // Point (0,h) - bottom-left corner
    const x2 = a * 0 + c * h; // shearX * h
    const y2 = b * 0 + d * h; // (1 + shearX * shearY) * h

    // Point (w,h) - bottom-right corner
    const x3 = a * w + c * h; // w + shearX * h
    const y3 = b * w + d * h; // shearY * w + (1 + shearX * shearY) * h
    
    // Determine the bounding box of the sheared image.
    // This encompasses all transformed corner points.
    const minX = Math.min(x0, x1, x2, x3);
    const maxX = Math.max(x0, x1, x2, x3);
    const minY = Math.min(y0, y1, y2, y3);
    const maxY = Math.max(y0, y1, y2, y3);

    // Set the canvas dimensions to fit the entire sheared image.
    canvas.width = maxX - minX;
    canvas.height = maxY - minY;

    // Calculate the translation amounts (e, f in setTransform)
    // needed to position the sheared image correctly within the canvas.
    // This ensures that the part of the image that might have been sheared
    // to negative coordinates is visible.
    const translationX = -minX;
    const translationY = -minY;

    // Apply the combined shear and translation transformation.
    ctx.setTransform(a, b, c, d, translationX, translationY);
    
    // Draw the original image. The transformation will be applied as it's drawn.
    // Using drawImage(image, dx, dy, dWidth, dHeight) for clarity,
    // though drawImage(image, dx, dy) would use intrinsic image width/height.
    ctx.drawImage(originalImg, 0, 0, w, h);

    return canvas;
}