Overview
Introduction
"Canvas size" and "image size" are different operations: resizing an image scales its content, while changing the canvas keeps content at its original pixel size and adjusts the surrounding space instead. This tool does the latter for every frame of an animated GIF.
It decodes each frame, places its content unscaled onto a new canvas at your chosen anchor point, and re-encodes the result, entirely in your browser.
What Is GIF Canvas Size Changer?
A client-side tool that changes every frame of an animated GIF's logical canvas dimensions without scaling the existing pixel content, anchoring that content at a chosen corner (top-left, bottom-right) or the center as the canvas grows or shrinks.
Growing the canvas pads the newly added area with transparent pixels; shrinking it crops away whatever content no longer fits.
How GIF Canvas Size Changer Works
Given a new width/height and an anchor point, the tool computes an offset for where the original content's top-left corner should land on the new canvas (0,0 for top-left anchor, centered for center anchor, or flush against the bottom-right corner for that anchor).
Every source pixel is then copied to its offset position on a newly created canvas of the requested size, skipping any pixel that would land outside the new canvas's bounds (which is how shrinking crops content away). This runs identically per decoded frame.
When To Use GIF Canvas Size Changer
Use it to add a uniform transparent margin/padding around an animated GIF's content without scaling anything.
It's also useful for trimming a fixed amount of canvas from one side or corner of an animation, or standardizing several GIFs to the same canvas size while keeping their content pixel-accurate.
Often used alongside GIF Resizer, GIF Cropper and GIF Rectangle Fitter.
Features
Advantages
- Keeps existing content at its exact original pixel size; no resampling or quality loss from scaling.
- Three anchor options give control over which part of the content stays fixed as the canvas changes.
- Runs entirely client-side; nothing you upload leaves your browser.
Limitations
- Only three anchor points are offered (top-left, center, bottom-right); there's no arbitrary custom-offset anchor.
- Shrinking the canvas permanently crops away content outside the new bounds rather than offering an undo or preview-first workflow within the tool itself.
Examples
Best Practices & Notes
Best Practices
- Choose center anchor for adding symmetric padding, or a corner anchor when you specifically want to keep one edge or corner fixed.
- Preview the result before downloading, especially when shrinking the canvas, since cropped content can't be recovered afterward.
- Pair with gif-shifter first if you need to reposition content before changing the canvas around it.
Developer Notes
changeGifCanvasSize in gif-canvas-size-changer.ts mirrors png-canvas-size-changer.ts's anchor-offset placement math exactly, applied per decoded GIF frame via transformGifFrames, so every frame computes the same offset from the same source dimensions and target canvas size.
GIF Canvas Size Changer Use Cases
- Adding a uniform transparent margin around an animated GIF's content
- Standardizing multiple animated GIFs to the same canvas size without scaling their content
- Trimming canvas space from one side of an animation while keeping the rest pixel-accurate
Common Mistakes
- Confusing this with gif-resizer and expecting the content itself to scale up or down; here, only the canvas around the content changes.
- Shrinking the canvas without previewing first and losing content that falls outside the new bounds unexpectedly.
Tips
- If you actually want to scale content to fit a new size (rather than pad/crop around it), use gif-resizer or gif-rectangle-fitter instead.
- Combine with gif-shifter beforehand if the content needs repositioning before you fix the canvas around it.