Back to Node List

Fit to Canvas

fit_to_canvas

Fit image to target canvas size with various modes

Reviewed
Guide available
The node name and summary are available in English. Port, parameter, and article details are currently shown in Japanese.

Input Ports

NameTypeDescription
画像
input
Image
Required
入力画像

Output Ports

NameTypeDescription
画像
output
Image
フィット後の画像

Parameters

NameTypeDefaultRangeDescription / Options
width
Int
321–4096

ターゲットキャンバス幅

高さ
height
Int
321–4096

ターゲットキャンバス高さ

フィットモード
fit_mode
Enum
Contain

画像をキャンバスにどう合わせるか

  • 内包Contain
    アスペクト比を維持してキャンバス内に収める。余白あり
  • カバーCover
    アスペクト比を維持してキャンバスを覆う。はみ出しクリップ
  • 引き延ばしStretch
    アスペクト比を無視して引き延ばし
  • 配置のみNone
    リサイズなし、キャンバスに配置のみ
整列
anchor
Enum
Center

余白がある場合の画像配置位置

  • 左上Top-Left
  • 上中央Top-Center
  • 右上Top-Right
  • 左中央Center-Left
  • 中央Center
  • 右中央Center-Right
  • 左下Bottom-Left
  • 下中央Bottom-Center
  • 右下Bottom-Right
スケール方式
sampling
Enum
NearestNeighbor

スケーリング方式

  • ニアレストネイバーNearestNeighbor
    フィットサイズに正確にスケール
  • 整数倍のみIntegerOnly
    拡大は整数倍、縮小は整数分の1でスケール(ピクセルパーフェクト)

Overview

Fits images of different sizes into a specified canvas. Using the same idea as CSS object-fit (Contain / Cover / Stretch / None), it standardizes assets in one node—for example, making every image 64×64 and aligning it bottom-center.

Usage tips

  • The go-to pixel-art settings are fit_mode = Contain and sampling = IntegerOnly. Enlargement uses factors such as 2× or 3×; reduction uses reciprocals such as 1/2 or 1/3 and always keeps the whole image in the canvas.
  • This is useful before building a sprite sheet. Align frames of different sizes with None + Bottom-Center to create an animation anchored at the feet.
  • For only cropping or adding margins, use canvas_resize; for free-form scaling alone, use content_resize.

Related nodes

  • canvas_resize — simple canvas changes with fixed placement
  • content_resize / pixel_scale — scaling itself
  • sprite_sheet_pack — a common destination after standardization

Fit modes

Mode Label Effect
Contain Contain Largest size that fits within the canvas; preserves aspect ratio and leaves margins
Cover Cover Smallest size that covers the canvas; preserves aspect ratio and clips overflow
Stretch Stretch Ignores the aspect ratio and stretches to fill the canvas
None Placement only Does not resize; only places the image on the specified canvas

Scale methods

Method Label Description
NearestNeighbor Nearest neighbor Scales exactly to the fitted dimensions
IntegerOnly Integer only Enlarges by the largest integer factor (1×, 2×, 3×...) or reduces by the largest fitting integer reciprocal (1/2, 1/3...)

IntegerOnly is especially useful for pixel art. It avoids fractional enlargement, and when the input is larger than the canvas it chooses 1/2, 1/3, and so on until the whole image fits, so Contain never crops it.

Examples

Fit pixel art into a preview canvas

Place 16×16 pixel art with width: 64, height: 64, fit_mode: Contain, and sampling: IntegerOnly → 4× scaling to 64×64.

Make a background image cover the canvas

Place a 48×32 background with width: 64, height: 64, fit_mode: Cover, and anchor: Center → preserve the aspect ratio, cover the canvas, and clip the overflow.

Place a sprite on a canvas

Place a 16×16 sprite with width: 32, height: 32, fit_mode: None, and anchor: Bottom-Center → align it bottom-center with margins around it.

Back to Node List
Fit to Canvas — PixPipeline Node Reference