Nodes/RC Image Compositor/RC Interactive Canvas
ComfyUI Node

RC Interactive Canvas

Move the sticker with your mouse, not the JSON

By kj863257·Created 11 months ago·Updated 10 months ago· 16
RC Interactive Canvas
  • background
  • foreground
  • image
  • foreground_mask
composition_data{}
pass_forwardfalse

Compositing in ComfyUI has a chicken-and-egg problem: you position an image, and every attempt at "I'll just eyeball the numbers" is miserable because you can't see the result until you hit queue. RC_InteractiveCompositor is this pack's answer - an embedded Fabric.js canvas where you drag, scale, rotate, and erase the foreground over a background before committing. It's the node from the RC Image Compositor suite that closest matches "Photoshop, but inside the graph," and it's worth the setup fiddliness it costs.

The wider ecosystem has been heading this way - Photoshop-like layered editors (Layers Utility, LayerForge) keep showing up as "what do I use for compositing" answers - but this one is specifically about quick placement, not a full layer stack. It slots into a workflow that already has a foreground and a background and just needs you to put the foreground somewhere.

How it works

You feed a background (which defines the canvas size) and a foreground, hit queue, and the node ships both images to the frontend as base64. A canvas appears on the node with the foreground as a draggable layer: move, scale, rotate, and - the useful bit - an eraser brush that writes transparency into the foreground so it blends with the background. When you're happy, the composition (transform plus mask) is saved back as composition_data JSON and a PNG on disk.

The inputs you'll touch:

  • background / foreground - the two IMAGE inputs. Background sets canvas dimensions.
  • composition_data - auto-generated JSON. Don't hand-edit it; the tooltip calls it "auto-generated by canvas."
  • pass_forward - the gate. The flow is: run with it off, place your foreground, then turn it on and run again to send the result downstream. The node is deliberately designed to block until you've placed things.

Outputs are image (the composited result) and foreground_mask - a MASK of the erased/transformed foreground you can feed into downstream nodes.

Installing it

ComfyUI Manager → search "RC Image Compositor" → install, restart. Manual:

cd ComfyUI/custom_nodes
git clone https://github.com/kj863257/ComfyUI_RC_Image_Compositor
cd ComfyUI_RC_Image_Compositor
pip install -r requirements.txt

Dependencies: pillow, numpy, opencv-python only - the canvas is all frontend JavaScript, so no extra backend weight.

Where people get burned

  • pass_forward is not optional. With it off, the node raises a runtime error on purpose ("Please enable Pass Forward after adjusting the composition") - it's a two-phase design, not a bug. Run → place → enable → run again.
  • It's an output node. It marks itself as one, so it stops the graph the first time until you've composed. Expect it to interrupt the first run.
  • State lives in the canvas, not the widget numbers. IS_CHANGED keys off composition_data, so every edit re-triggers the workflow. That's correct behavior but it means batch-heavy workflows feel different here.
  • It's young and niche. This pack has no real community footprint yet (and, unlike the big compositing packs, no reddit signal to lean on), so if you hit a frontend glitch, you're debugging a small project. The core motion - place, erase, pass forward - works, but set expectations accordingly.

For "I have a logo / sticker / cutout and I need it on this background, positioned like a human would," this node is the fastest path in the pack. Just remember the two-phase dance.

CategoryRC/Utilities

Inputs (4)

NameTypeDefaultDescription
backgroundIMAGEBackground image layer (defines canvas size)
foregroundIMAGEForeground image layer (can be transformed and erased)
composition_dataSTRING{}JSON transform data (auto-generated by canvas)
pass_forwardBOOLEANfalsePass the saved composition result to downstream nodes when enabled

Outputs (2)

NameTypeDescription
imageIMAGE
foreground_maskMASK