Resize the canvas workspace around your image without scaling
When you use an "Image Resizer", the computer actually stretches or shrinks the image pixels using interpolation algorithms (like bicubic filtering). This permanently alters the visual content.
When you use a "Canvas Resizer", the pixels of your original image are entirely untouched. Only the bounding box (the workspace holding the image) changes size.
To expand a canvas securely in the browser, this tool creates a completely new, blank HTML5 Canvas element at your newly requested dimensions in memory. It then fills it with your chosen background color.
Next, it uses a drawImage() API call to paint your original image on top of this new background. To position it correctly based on your Anchor selection (e.g., "Anchor Bottom Right"), it calculates an X/Y translation matrix representing the mathematical difference between the new canvas size and the old image size.
If the new canvas dimensions you request are mathematically smaller than your original image, the outer edges of your image are simply discarded during the drawImage() phase.
This is mathematically identical to a standard Crop operation. However, instead of letting you manually drag a crop box across the screen, it acts as a programmatic crop that forces the image to perfectly align to a specific corner or the exact center.
If you have a 500x500 image, and you set the Canvas Resize to 1000x1000 with a 'Center' anchor, what happens?
