Image Skewing Tool

function processImage(originalImg, skewXDegrees = "0", skewYDegrees = "0") {
    const w = originalImg.width;
    const h = originalImg.height;

    let numSkewX = parseFloat(skewXDegrees);
    if (isNaN(numSkewX)) {
        numSkewX = 0; // Default to 0 if parsing fails
    }
    let numSkewY = parseFloat(skewYDegrees);
    if (isNaN(numSkewY)) {
        numSkewY = 0; // Default to 0 if parsing fails
    }

    // Clamp angles to prevent extreme distortions and issues with Math.tan(PI/2)
    // Angles outside +/- ~89.99 degrees can lead to extremely large or infinite tan values
    const MAX_ANGLE = 89.99; // Degrees
    numSkewX = Math.max(-MAX_ANGLE, Math.min(MAX_ANGLE, numSkewX));
    numSkewY = Math.max(-MAX_ANGLE, Math.min(MAX_ANGLE, numSkewY));

    const skewXrad = numSkewX * Math.PI / 180;
    const skewYrad = numSkewY * Math.PI / 180;

    const tx = Math.tan(skewXrad); // Horizontal skew factor (tan of angle for x-skew)
    const ty = Math.tan(skewYrad); // Vertical skew factor (tan of angle for y-skew)

    // Calculate the coordinates of the four corners of the image after skewing.
    // The transformation applied is:
    // x' = x + tx * y
    // y' = ty * x + y
    // where (x,y) are original coordinates and (x',y') are skewed coordinates.
    // Original corners mapping:
    // P0 (0,0)    -> P0_skewed (0, 0)
    // P1 (w,0)    -> P1_skewed (w, ty*w)
    // P2 (w,h)    -> P2_skewed (w + tx*h, ty*w + h)
    // P3 (0,h)    -> P3_skewed (tx*h, h)
    
    const p0_skewed = { x: 0,         y: 0 };
    const p1_skewed = { x: w,         y: ty * w };
    const p2_skewed = { x: w + tx * h, y: ty * w + h };
    const p3_skewed = { x: tx * h,    y: h };

    const xCoords = [p0_skewed.x, p1_skewed.x, p2_skewed.x, p3_skewed.x];
    const yCoords = [p0_skewed.y, p1_skewed.y, p2_skewed.y, p3_skewed.y];

    const minX = Math.min(...xCoords);
    const maxX = Math.max(...xCoords);
    const minY = Math.min(...yCoords);
    const maxY = Math.max(...yCoords);

    // Calculate the dimensions of the new canvas to encompass the skewed image
    const newCanvasWidth = Math.ceil(maxX - minX);
    const newCanvasHeight = Math.ceil(maxY - minY);

    const canvas = document.createElement('canvas');
    canvas.width = newCanvasWidth;
    canvas.height = newCanvasHeight;
    
    const ctx = canvas.getContext('2d');

    // If the original image had 0 width/height, or if the skewed image has 0 area
    if (newCanvasWidth <= 0 || newCanvasHeight <= 0) {
        // This can happen if originalImg.width or originalImg.height is 0,
        // or if MAX_ANGLE is too close to 90 and numerical precision leads to issues.
        return canvas; // Return an empty canvas with the calculated (possibly 0) dimensions
    }
    
    // The canvas `transform(a, b, c, d, e, f)` method uses this matrix:
    // [ a c e ]
    // [ b d f ]
    // [ 0 0 1 ]
    // Resulting coordinate transformation: x_new = a*x_old + c*y_old + e
    //                                   y_new = b*x_old + d*y_old + f
    // For our desired skew transformation (x' = x + tx*y, y' = ty*x + y),
    // the matrix parameters should be:
    // a = 1  (horizontal scaling)
    // b = ty (vertical skew factor, applied to x_old)
    // c = tx (horizontal skew factor, applied to y_old)
    // d = 1  (vertical scaling)
    // e = 0  (horizontal translation)
    // f = 0  (vertical translation)
    
    // Translate the canvas context so that the top-left corner of the
    // skewed image's bounding box (which is at {minX, minY} in the skewed coordinate space)
    // becomes the origin (0,0) of the canvas.
    ctx.translate(-minX, -minY);
    
    // Apply the skew transformation.
    ctx.transform(1, ty, tx, 1, 0, 0);
    
    // Draw the original image at (0,0) in its own local coordinate system.
    // This (0,0) point will be transformed by the Current Transformation Matrix (CTM),
    // which is now effectively Translate_Matrix * Skew_Matrix.
    // This ensures the image is drawn correctly within the skewed parallelogram,
    // and the entire parallelogram is visible on the canvas.
    ctx.drawImage(originalImg, 0, 0, w, h);

    return canvas;
}