ComfyUI Node

Web Canvas

The Web Canvas node that gives ComfyUI a real layer editor

By GoingAI1998·Created 2 years ago·Updated 2 years ago· 5
Web Canvas
  • back_image
  • fore_image
  • fore_mask
  • image
  • mask
seed0

Compositing is where ComfyUI's node graph hits its dumbest wall. Want to drop a foreground onto a background, rotate it a hair, scale it down, and call it a day? In pure nodes that's a chain of transforms, scales, and an ImageCompositeMasked where every number is a guess you only confirm by re-running the graph. The community has said it a hundred times: the problem with masking and compositing in ComfyUI is the interface, not the models. WebCanvas is one author's answer - a pop-up canvas where you drag the picture until it looks right, then hand the result back to the graph.

It's the flagship node of GoingAI1998/Comfyui_imgcanvas ("ComfyUI Web Canvas Node"), a small single-author pack that exists because the author couldn't find a layer-mixing custom node they liked. "Not a pyqt project," the README insists - the frontend is JavaScript with a thin Python backend, rebuilt that way on purpose because PyQt-based tools kept breaking on macOS. The trade-off is a browser canvas popping up when the node runs instead of a native window. That's the whole gimmick, and it works.

How it works

This is a runtime editor, not a one-shot operation. Wire in a background and a foreground, hit run, and a web popup opens with both images on a canvas. You manipulate the foreground directly: drag its center to move it, drag a corner to scale it, grab the top handle to rotate it. Hold Shift for precision - 15° rotation snapping and proportional scaling. There's an opacity slider for blending, a reset button, and keyboard shortcuts: R to reset, / to rotate, +/- to scale, Enter to confirm, Esc to cancel. Hit Enter and the node composites, then the graph continues. Nothing commits until you confirm, so every transform is reversible and you can fiddle freely.

The inputs and outputs that matter

The schema is small, which is the point. You actually set three things:

  • back_image (IMAGE) - the background layer.
  • fore_image (IMAGE) - the foreground layer you'll be dragging around.
  • seed (INT, default 0) - the README just calls it a random seed value and doesn't say what it seeds. Treat it as the reproducibility knob and leave it alone otherwise.

Optionally feed fore_mask (MASK) if you already have a mask for the foreground. Skip it and the node auto-generates one - automatic mask generation is a headline feature.

Two outputs come back. image (IMAGE) is the composited result, and mask (MASK) is what actually landed on the canvas - the sneaky useful one, because wiring it into a downstream composite lets you stamp only the edited region back onto the original, which is exactly the "composite after editing so unmasked pixels stay pristine" rule the community keeps hammering.

Installing it

Standard custom-node fare, with no model downloads and no pip dependencies listed in the README - the Python side is just a backend for the browser UI.

  • ComfyUI Manager: search "ComfyUI Web Canvas Node" (or imgcanvas) in the install menu.
  • Manual:
cd ComfyUI/custom_nodes
git clone https://github.com/GoingAI1998/Comfyui_imgcanvas

Then restart ComfyUI.

Common issues

  • The 60-second timeout. The README is blunt: you have 60 seconds to finish the edit. This isn't a "save often" workflow - know what you're about to do before you hit run.
  • The browser does the compositing, so memory is spent in your tab, not your GPU. Big images on a loaded machine get sluggish; keep canvas sizes reasonable.
  • It's a popup. If your browser blocks popups for the ComfyUI origin, no canvas appears and the node just waits out that timer. Allow popups once and it's fine.
  • Zero community footprint. Searching for imgcanvas in the subreddits turns up nothing - this is a young project from a single author, not a battle-tested standard. Fine for your own workflows, just know what you're installing.

Honestly, this is the node you reach for when you're sick of nudging scale fields by hand to line up two images. It won't replace a real layer stack, but for "put this object on that background" it turns a ten-minute guessing game into a ten-second drag. The author teases a bigger "cup" version that handles ten layers with reordering - if this one clicks for you, that's the upgrade to watch.

Categoryimage/process

Inputs (4)

NameTypeDefaultDescription
back_imageIMAGE
fore_imageIMAGE
seedINT00–18446744073709550000
fore_maskoptMASK

Outputs (2)

NameTypeDescription
imageIMAGE
maskMASK