a44c2c4753f6ae41abc8a4cfd1d94cf0b15a863b
This commit removes the unnecessary HTML canvas element that was causing
persistent overlap issues with widgets at the bottom of the node.
Root Cause Analysis:
- The widget was creating an HTML <canvas> element with absolute positioning
- But ALL rendering was done directly to the LiteGraph canvas context (ctx)
- The HTML canvas served NO purpose but was positioned over the node
- This caused overlap with bottom widgets (box_x/y/w/h) and extended beyond bounds
The Fix:
- Removed HTML canvas creation (document.createElement("canvas"))
- Removed canvas positioning code (absolute positioning, transform-aware updates)
- Removed off-screen hiding mechanism (onDrawBackground handler)
- Removed canvas cleanup code (onRemoved handlers)
- Reduced BOTTOM_MARGIN from 80px to 10px (no longer needed)
Result:
- Canvas visualization drawn ONLY to LiteGraph canvas (native rendering)
- No HTML elements overlaying the node
- Widgets no longer overlap canvas
- Canvas no longer extends beyond node bounds
- 70 lines of unnecessary code removed
This is the CORRECT approach - drawing directly to ctx without HTML overlays.
ComfyUI EasyRegion
Control different parts of your image with separate prompts using visual box drawing.
Quick Start
- Install: Clone to
ComfyUI/custom_nodes/or use ComfyUI Manager - Add Node: Search for "EasyRegion"
- Connect: CLIP → EasyRegion → Sampler
- Draw: Use canvas to position regions, type prompts
- Generate: Connect to your sampler and run
Nodes
EasyRegion (Mask-Based)
For: Models using mask-based conditioning (Flux, Chroma, SD3, SD3.5, Qwen-Image)
Inputs:
clip: CLIP from checkpointwidth/height: Must match your latent dimensionssoften_masks: Feathering at edges (recommended ON)background_prompt: Scene descriptionbackground_strength: Background conditioning strength (0.5 default)region1-4_prompt: Region-specific promptsregion1-4_strength: Per-region strength (start with 2-4, adjust as needed)
General Tips:
- Include spatial location in prompts - Try adding location hints like "on left side", "right third of image", "top right corner" to your region prompts. This may help guide placement, though results vary by model.
- Start with strength values 2.5-4.5, adjust if regions don't show or become too soft
- Lower background_strength (0.3-0.5) makes regions more prominent
- See "Model-Specific Tips" below for per-model guidance
EasyRegion (Area-Based)
For: SD1.5, SD2.x, SDXL
Same interface, uses area-based conditioning instead of masks.
Canvas Controls
- region: Select which region to edit (1-4)
- box_x, box_y: Region top-left position (pixels)
- box_w, box_h: Region dimensions (pixels)
Example Workflow
Checkpoint Loader
├→ CLIP → EasyRegion (Mask-Based)
│ ├ width: 1024
│ ├ height: 1024
│ ├ soften_masks: true
│ ├ background_prompt: "empty city street at night"
│ ├ background_strength: 0.5
│ ├ region1_prompt: "red sports car on left side (left third)"
│ ├ region1_strength: 2.5
│ ├ region2_prompt: "giraffe on right side (right third)"
│ └ region2_strength: 3.5
├→ MODEL → KSampler ← conditioning
└→ VAE → VAE Decode
Troubleshooting
Regions not showing:
- Increase region strength (try 3.0-5.0)
- Lower background_strength (try 0.3-0.5)
- Check width/height match your latent exactly
- Verify boxes aren't outside image bounds
- Try including spatial location in prompts ("left side", "right third")
Soft/blurry regions:
- Lower region strength (too high = loss of detail)
- Sweet spot is usually 2.5-4.5 with bg_strength=0.5
Validation errors:
- Ensure width/height are multiples of 64
- Check no regions overlap fullscreen
Model-Specific Tips
Flux (Flux.1-Dev, Flux.1-Schnell)
- CFG: Use CFG 1.0 with Flux Base (NO negative prompt)
- Higher CFG = blur and artifacts
- Strength range: 2.5-4.5 works well with bg_strength=0.5
- Region count: Keep to 3-4 regions max for best results
- Positioning: Works best with regions positioned far apart (e.g., left/right thirds)
SD3 / SD3.5
- Similar to Flux - mask-based conditioning
- Start with strength 2.5-4.5
Chroma
- Mask-based conditioning like Flux
- Keep to 3-4 regions max
SDXL / SD1.5
- Use EasyRegion (Area-Based) node instead
- Area-based conditioning doesn't use masks
Advanced Nodes
Original nodes available for complex workflows:
- Multi Area Conditioning: Area-based, requires external CLIP encode
- Multi Area Conditioning Mask: Mask-based, requires external CLIP encode
- Multi Latent Composite: Visual latent compositing with feathering
Credits
Based on visual area conditioning by Davemane42.
Maintained by EnragedAntelope - github.com/EnragedAntelope/ComfyUI_RegionalConditioning
License
MIT License - use freely in personal and commercial projects.
Languages
JavaScript
53.9%
Python
46.1%