ComfyUI-ResizeToCanvasSize

A ComfyUI custom node pack that resizes images to an exact target canvas size with full control over scaling, cropping, and placement.

---

Nodes

| Node | Description | |---|---| | Resize To Canvas Size | Resize an image to a canvas using a 9-point anchor grid (flush edge/corner placement) | | Resize To Canvas Size (COI) | Resize with mask-driven Centre of Interest placement — a 7×7 target grid controls where the detected subject lands on the canvas | | Load Image To Canvas | Load an image from disk and interactively composite it onto a canvas — live preview, rotary zoom dials, drag-to-reposition, flip controls, and a context-aware mask |

---

Resize To Canvas Size

Features

• Photoshop-style anchor grid — 3×3 button grid at the top of the node; click any cell to set the anchor point. The selected cell shows a dot, directly adjacent cells show arrows pointing away from the anchor, and non-adjacent cells are blank
• 5 scale methods — choose how the image is scaled before the final fit step
• 2 fill methods — crop (trim overflow, optionally pad gaps) or stretch (distort to fill)
• 6 padding fill options — black, white, 50% gray, transparent, custom colour (native colour picker), or random noise with a seed
• Outputs RGBA image + padding mask — the padding_mask output is 1 where padding was added and 0 where original image pixels are, making it easy to pipe into an inpainting workflow

Inputs

| Input | Type | Description | |---|---|---| | image | IMAGE | Source image (batch supported) | | width | INT | Target canvas width in pixels | | height | INT | Target canvas height in pixels | | anchor | Anchor Grid | 3×3 click grid — sets the anchor point for crop/pad positioning | | scale_method | Dropdown | How to scale the image before filling (see below) | | fill_method | Dropdown | crop or stretch | | padding_fill | Dropdown | How to fill any gaps (see below) | | custom_color_hex | Colour picker | Only shown when padding_fill is custom | | custom_color_hex_input | STRING (optional connector) | Only visible when padding_fill is custom. Connect any node that outputs a #RRGGBB / #RRGGBBAA string to override the colour picker. Invalid values fall back to the picker value. | | noise_seed | INT | Seed for noise generation — only shown when padding_fill is noise |

Outputs

| Output | Type | Description | |---|---|---| | IMAGE | IMAGE (RGBA) | The resized image | | padding_mask | MASK | 1.0 where padding was added, 0.0 where original image pixels are. All zeros when no padding occurred. |

---

Resize To Canvas Size (COI)

| Manual mode | Mask mode (mask_weighted_centre) | |---|---| | | |

Places the image on the canvas by first computing a Centre of Interest (COI) from an optional mask, then using a 7×7 target grid to control exactly where that COI lands on the canvas.

Core concept

The anchor grid in this node always means: "place the COI at this point on the canvas."

| Mode | COI used for placement | |---|---| | manual | Image centre (src_w/2, src_h/2) | | mask_bbox_centre | Centre of the bounding box of non-zero mask pixels | | mask_weighted_centre | Weighted centroid (centre of mass) — large contiguous masked areas dominate; stray pixels have negligible pull |

If no mask is connected, or anchor_mode is manual, the image centre is used regardless of mode.

The 7×7 grid

A 7×7 lattice of 49 selectable target points is drawn over a 3×3 nonant background. The 7 positions per axis sit at multiples of 1/6 of the canvas dimension:

• Even indices (0, 2, 4, 6) — nonant boundaries (0, W/3, 2W/3, W)
• Odd indices (1, 3, 5) — nonant midpoints and centres (W/6, W/2, 5W/6)

Click any dot to set the canvas target for the COI. The default (3,3) places the COI at canvas centre. Boundary dots are displayed slightly larger; the selected dot is highlighted in blue.

Inputs

| Input | Type | Description | |---|---|---| | image | IMAGE | Source image (batch supported) | | width | INT | Target canvas width in pixels | | height | INT | Target canvas height in pixels | | anchor_grid | 7×7 COI Grid | Click grid — selects where on the canvas the Centre of Interest is placed | | anchor_mode | Dropdown | manual, mask_bbox_centre, or mask_weighted_centre | | scale_method | Dropdown | How to scale the image before filling | | fill_method | Dropdown | crop or stretch | | padding_fill | Dropdown | How to fill any gaps | | custom_color_hex | Colour picker | Only shown when padding_fill is custom | | custom_color_hex_input | STRING (optional connector) | Overrides the colour picker when connected | | noise_seed | INT | Only shown when padding_fill is noise | | mask | MASK (optional) | Mask used to compute the COI when anchor_mode is not manual. If the mask size differs from the image, it is resized automatically. |

Outputs

| Output | Type | Description | |---|---|---| | IMAGE | IMAGE (RGBA) | The resized image | | padding_mask | MASK | 1.0 where padding was added, 0.0 where original image pixels are |

---

Scale Methods

| Method | Behaviour | |---|---| | None – use original size | No scaling — use the image at its original resolution | | Fit to Canvas short edge | Scale so the image's shortest edge matches the canvas's shortest edge | | Fit to Canvas long edge | Scale so the image's longest edge matches the canvas's longest edge | | Fit to Canvas height | Scale to match the canvas height exactly | | Fit to Canvas width | Scale to match the canvas width exactly |

After scaling, the image may be larger than the canvas (overflow → crop) or smaller (gap → filled with padding_fill).

---

Padding Fill Options

| Option | Behaviour | |---|---| | black | Fill gaps with solid black | | white | Fill gaps with solid white | | gray_50 | Fill gaps with 50% gray | | transparent | Fill gaps with transparency (alpha = 0) | | custom | Fill gaps with a colour chosen via the colour picker | | noise | Fill gaps with random per-pixel noise — a noise_seed field appears to control reproducibility |

---

Fill Methods

| Method | Behaviour | |---|---| | crop | Place the scaled image using the anchor position, trim any overflow, fill any gaps with the padding colour. Anchor determines which part of the image is kept. | | stretch | Distort/resize the scaled image to exactly fill the canvas. Anchor is not used. |

---

Common Recipes

Crop to square, keep the centre:

• scale_method: Fit to Canvas short edge · fill_method: crop · anchor: center

Letterbox / pillarbox (fit within canvas, pad the rest):

• scale_method: Fit to Canvas long edge · fill_method: crop · padding_fill: black

Distort to fill (ignore aspect ratio):

• scale_method: None – use original size · fill_method: stretch

Cookie-cutter crop at original resolution:

• scale_method: None – use original size · fill_method: crop — canvas dimensions act as a crop window at the anchor position

Inpaint the padded region:

• Connect padding_mask to a KSampler inpainting setup to fill padding areas with generated content

Face-centred portrait crop (COI node):

• Feed a face detection mask (e.g. UltralyticsDetectorProvider → BboxDetectorSEGS → SAMDetectorCombined) into the mask input
• Set anchor_mode: mask_bbox_centre · grid: (3,3) (canvas centre)
• Set scale_method: Fit to Canvas width — the detected face will be centred on the canvas regardless of where it appears in the source image

With multiple subjects, mask_weighted_centre finds the centre of gravity across all detected regions, automatically framing everyone together:

---

---

Load Image To Canvas

| Locked aspect ratio | Unlocked aspect ratio | |---|---| | | |

Loads an image from disk and composites it onto a user-defined canvas with full interactive control over scaling, zoom, positioning, and padding. Designed as a manual, intentional starting node — user interaction is the point.

Features

• Live preview — canvas-aspect-ratio preview embedded in the node, updates reactively as every parameter changes. A resolution label (W × H) sits just below the preview and stays accurate when canvas dimensions change
• Drag to reposition — click and drag anywhere on the preview to move the image; the offset_x / offset_y values update live
• Scroll to zoom — scroll the mouse wheel over the preview or the dials; velocity-sensitive steps (rapid scroll = coarser, slow = finer). Shift+scroll for large jumps
• Shift+drag crop box — draw an aspect-ratio-locked region on the preview; releasing snaps zoom and offset so that region fills the canvas exactly
• Rotary zoom dials — canvas-based knobs for zoom. Drag diagonally to change value; click the numeric readout to type an exact value
• Aspect ratio lock (🔒 Aspect Ratio Locked / 🔓 Aspect Ratio Unlocked) — single unified dial when locked; independent Width and Height dials when unlocked. Locking preserves the x:y ratio you set while unlocked
• Fit Width / Fit Height buttons — one-shot snap buttons flanking the dial(s); scale the image to fill the chosen canvas axis and centre the offset on that axis
• = (Equalize) button — appears between the Width and Height dials in unlocked mode; copies the Width zoom value to Height, restoring the image's natural (undistorted) aspect ratio
• ⇄ Swap W↔H button — swaps canvas_width and canvas_height with each other; useful for quickly toggling between portrait and landscape canvas orientations
• Flip controls — horizontal and vertical flip
• 6 padding fill options — black, white, 50% gray, transparent, custom colour, or noise (same options as the rest of the pack)
• Context-aware mask output — canvas-space (white = image, black = padding) when padding is present; source-image-space (white = sampled pixels) when fully covered
• Original image passthrough — ORIGINAL IMAGE output carries the raw unmodified loaded image with no transforms applied

Inputs

| Input | Type | Description | |---|---|---| | image | File picker | Source image loaded from ComfyUI's input/ folder | | canvas_width | INT | Target canvas width in pixels | | canvas_height | INT | Target canvas height in pixels | | padding_fill | Dropdown | How to fill any uncovered canvas area | | custom_color_hex | Colour picker | Only shown when padding_fill is custom | | custom_color_hex_input | STRING (optional connector) | Overrides the picker when connected | | noise_seed | INT | Only shown when padding_fill is noise | | lock_aspect_ratio | BOOLEAN | Controlled via the lock toggle button in the Zoom section | | zoom_x | FLOAT | Horizontal zoom multiplier (1.0 = 100%) — set via dial or readout | | zoom_y | FLOAT | Vertical zoom multiplier — independent when unlocked | | offset_x | FLOAT | Horizontal position (0.5 = centred) — set via drag or manual input | | offset_y | FLOAT | Vertical position (0.5 = centred) | | flip_horizontal | BOOLEAN | Mirror left/right | | flip_vertical | BOOLEAN | Mirror top/bottom | | invert_mask | BOOLEAN | Flip white/black on the mask output |

Outputs

| Output | Type | Description | |---|---|---| | IMAGE | IMAGE (RGBA) | Composited canvas result | | MASK | MASK | Context-aware mask — canvas-space when padding present; source-image-space when no padding | | ORIGINAL IMAGE | IMAGE (RGBA) | Raw unmodified loaded image, no transforms applied |

Mask detail

| State | Mask space | Mask content | |---|---|---| | Image has padding | Canvas space (canvas W × H) | White = where image sits, black = padding | | No padding (fully covered/cropped) | Source image space (original W × H) | White = which source pixels were sampled |

invert_mask flips this in all cases.

Transform order

1. Load image
2. Apply flip_horizontal / flip_vertical
3. Apply zoom_x / zoom_y
4. Apply offset_x / offset_y (image centre placed at offset × canvas)
5. Composite onto canvas with padding_fill
6. Compute mask

---

Installation

Clone this repository into your ComfyUI custom_nodes folder:

cd ComfyUI/custom_nodes
git clone https://github.com/Carasibana/ComfyUI-ResizeToCanvasSize.git

Then restart ComfyUI.

No additional Python packages are required beyond those already included with ComfyUI (Pillow, NumPy, PyTorch).

---

File Structure

ComfyUI-ResizeToCanvasSize/
├── __init__.py               # Registers nodes and web directory
├── nodes.py                  # Python node logic
├── js/
│   └── anchor_widget.js      # Custom anchor grid and COI grid UI widgets
└── examples/
    └── ResizeToCanvasSize_Example_Workflow.json
                              # Example workflow: basic resize (top) + face-COI resize (bottom)