Kanvas

Kanvas is an advanced image editing module for SD.Next
with tools for upload, paste, paint, resize, crop, filters, text, outpainting, masking, and multi-stage workflows.

At a Glance

• Edit on either the image layer or mask layer.
• Work in up to 10 stages, each with independent image and mask content.
• Export and processing use the currently active stage.
• SD.Next automatically selects the workflow based on available inputs (text, image, mask).

Quick Navigation

• Kanvas
• At a Glance
• Quick Navigation
  • Stages
  • Working with Objects
  • Shapes List
  • Text vs Image vs Inpaint
  • Toolbar
  • Overlay
  • Layer Selection
  • Upload / Paste / Remove / Reset
  • Undo / Redo
  • Opacity
  • Move / Resize
  • Crop
  • Paint
  • Magic Wand
  • Outpaint
  • Filters
  • Text
  • Zoom / Scale
  • Practical Tips
  • Settings
  • Server-side Masking
  • Disable Kanvas
  • Implementation

Tip

For effective editing in Kanvas, collapse SD.Next panels so Kanvas has maximum workspace. This applies to the left sidebar, right sidebar, and output panel.

Note

Kanvas is enabled by default and available in unified Control interfaces in both ModernUI and StandardUI. Legacy Img2Img continues to use standard Gradio image handling.

Tip

Quick shortcuts:

Action	Windows/Linux	macOS
Undo	Ctrl+Z	Cmd+Z
Redo	Ctrl+Shift+Z or Ctrl+Y	Cmd+Shift+Z
Pan while zoomed	Hold Ctrl + drag	Hold Ctrl + drag

Stages

Kanvas supports multiple stages.
Each stage has its own image layer and mask layer, and each layer can contain multiple objects.

The stages panel appears above the shapes list and provides: - Current active stage - Stage thumbnails (from the stage image layer) - Stage resolution - Add stage (+) - Delete stage (×) for non-primary stages

Rules and limits: - Maximum of 10 stages - Stage 1 cannot be deleted - Clicking a stage switches active editing to that stage - Clicking a stage without an image thumbnail opens upload

Important

Processing/export uses the currently active stage only.
Switch to the stage you want before sending to SD.Next.

Working with Objects

Objects can be images, painted shapes (for example brush strokes), or text.
Objects are independent and can be selected, moved, transformed, cropped, filtered, or deleted.

Example: 1. Upload an image. 2. Click the image to select it. 3. Click Move/Resize. 4. Move or resize using mouse/touch. 5. Add additional images or drawings as separate objects.

Tip

By default, the stage is auto-scaled to fit the visible area.
For precise edits, enable Zoom lock and work at 1:1 scale.

Tip

To pan while zoomed in, hold Ctrl and drag.

Shapes List

Kanvas displays a live shapes list for the active layer: - The title shows the active layer and shape count - Each entry displays the shape type and size - Click an entry to select it on the canvas

This is useful when shapes overlap and are hard to select directly.

Text vs Image vs Inpaint

When processing starts, Kanvas rasterizes the active stage layers, and SD.Next selects the workflow based on available inputs: - If image is empty, SD.Next uses text-to-image - If image exists, SD.Next uses image-to-image - If mask contains content, SD.Next uses inpainting

In short, this decision can be summarized as:

Inputs on active stage	SD.Next mode
No image, no mask	Text-to-image
Image present, no mask	Image-to-image
Any image state with mask content present	Inpainting

Note

Deselecting active transforms before processing helps avoid accidental edits.

Toolbar

Overlay

Kanvas includes a floating overlay panel that groups stage controls, shape lists, and active tool controls.

• Use the overlay collapse button to hide or expand the overlay panel.
• Drag the overlay by grabbing empty space in the top resolution bar.
• Double-click the top resolution bar to reset overlay position to its default location.
• The overlay hosts both the stages panel and the shapes panel for the active layer.

Layer Selection

Use image layer or mask layer button to choose the active editing layer.

Upload / Paste / Remove / Reset

Use Upload to add images to the active layer or drag and drop image files onto Kanvas. Each uploaded image becomes a separate object.

Use Paste to insert content from the clipboard.

Use Remove to delete the selected object.

Undo / Redo

Kanvas maintains edit history and supports both toolbar and keyboard undo/redo: - Toolbar: Undo (⟲) and Redo (⟳) - Keyboard: - Undo: Ctrl+Z (or Cmd+Z on macOS) - Redo: Ctrl+Shift+Z, Cmd+Shift+Z, or Ctrl+Y

History tracks structural edits (upload, remove, resize, filters, text, outpainting, stage operations) and paint/wand operations.

Tip

Magic wand drag is treated as a single history step, so one continuous drag can be undone in one action.

Use reset to clear Kanvas and reinitialize stage state (including stage list) to defaults.

Opacity

Use the opacity slider to change opacity of the selected object.

Move / Resize

Use Move/Resize to transform selected objects. Double-click an empty canvas area to fit the stage size to content bounds.

Crop

Use Crop to crop selected image objects.

Paint

Use Free Paint to draw on the active layer with customizable brush settings.

Magic Wand

Use Magic Wand to fill contiguous regions based on color similarity: - Works in both image and mask layers - Uses the current brush color, opacity, and blend mode - For mask layer painting, color is converted to grayscale - Tolerance controls how broadly similar pixels are included

Wand matching sources: - Default: Samples from the active layer - Merged (optional): Samples from the combined image and mask view

Typical flow: 1. Select active layer (image or mask). 2. Click Magic Wand. 3. Adjust tolerance (and optionally enable merged). 4. Click or drag on canvas to fill matching contiguous areas.

Outpaint

Typical outpaint flow: 1. Upload image to image layer. 2. Resize stage to target resolution. 3. Use Move/Resize to position the image. 4. Click Outpaint to enter outpaint mode. 5. Adjust blur/expand. 6. Click Outpaint again to apply. 7. Start SD.Next processing.

Note

Higher expand values increase overlap, which can improve blending.

Important

Outpainting requires suitable Input -> Denoising strength in SD.Next (typically 0.65-0.85).

Filters

Use Filters on selected objects: 1. Select the object 2. Click Filters 3. Choose a filter and adjust its value 4. Click Filters again to apply

Text

Use Text to add text: Set the font and value, then drag to create a text box on the active layer.

Zoom / Scale

Zoom using the mouse wheel, touch gestures, or toolbar buttons. Zoom Lock toggles auto-fit to enable manual zoom and 1:1 workflows.

Practical Tips

• Deselect active transform handles before processing to avoid accidental edits
• Use Zoom Lock for precise 1:1 work
• Hold Ctrl and drag to pan while zoomed in
• For outpainting, set SD.Next Input → Denoising Strength appropriately (typically 0.65–0.85)

Settings

Use Settings to customize Kanvas behavior and UI defaults. Settings persist in browser local storage across sessions.

Available options: - Toolbar size: changes toolbar icon/button size. - Toolbar hue: adjusts the toolbar color theme hue. - Overlay width: changes overlay panel width. - Allow toolbar hide: allows the toolbar to be hidden. - Zoom lock: keeps manual zoom behavior instead of auto-fit. - Max canvas size: limits stage size during resize operations. - Brush size: sets the default brush size. - Outpaint fill: toggles fill behavior for outpaint operations. - Show messages: enables/disables status toast messages. - Message timeout: controls how long status messages stay visible.

Click Reset in settings to restore all defaults.

Server-side Masking

SD.Next can generate masks server-side from input images (e.g., Auto-Segment or Auto-Mask) even when the Kanvas mask layer is empty.

Example auto-mask using BEN2 model:

Server options can also post-process Kanvas masks: - Blur: Apply Gaussian blur - Dilate/Erode: Expand or shrink the mask

These options can be previewed before processing.

Disable Kanvas

To disable Kanvas and use standard Gradio image handling:

SD_DISABLE_KANVAS=true

Implementation

Kanvas is maintained in the sdnext-kanvas repository and included as a submodule in SD.Next. It uses TypeScript and Konva.js for canvas operations.