Canvas Loop Behavior Affected by Browser Zoom and Image Size

[larocquedylan]

The canvas loop functionality is inconsistently affected by the browser's zoom level and the original size of the image. This issue results in improper looping of the canvas under certain conditions and this impacts the output of the canvas drawing.

Potential Solution A proposed solution is to implement a mechanism where:

The image file is read initially. The size of the image is determined. The loop parameters are then adjusted based on the image's size. This approach should theoretically allow the loop to function correctly regardless of the browser zoom level or the image size.

[larocquedylan]

Did some work on this yesterday...

const drawAsciiImage = async () => {
    const photo = await loadImage(imageSrc);

    // Uniform Scaling & Dynamic Resizing:
    // Calculate aspect ratio of the photo
    const aspectRatio = photo.width / photo.height;
    let resizedWidth, resizedHeight;

    // Adjust resizedWidth and resizedHeight based on aspect ratio to maintain uniform scaling
    if (width / height > aspectRatio) {
        // If canvas is wider relative to its height, adjust width based on height
        resizedHeight = height;
        resizedWidth = height * aspectRatio;
    } else {
        // If canvas is taller relative to its width, adjust height based on width
        resizedWidth = width;
        resizedHeight = width / aspectRatio;
    }

    // Set canvas dimensions
    canvas.width = width;
    canvas.height = height;

    // Handle Zoom Levels:
    // Calculate the dimensions of each 'pixel' on the canvas
    // This is influenced by the size of the canvas and the resized image
    const w = resizedWidth / width; // Width of each 'pixel' in the ASCII art
    const h = resizedHeight / height; // Height of each 'pixel' in the ASCII art

    // Draw the image onto the canvas at the resized dimensions
    ctx.drawImage(photo, 0, 0, resizedWidth, resizedHeight);

   // 
   //
}