Kanvas
Kanvas is an advanced image editing module for SD.Next
that provides a rich set of features for manipulating images before processing them using various models
It offers tools for uploading, mixing, resizing, painting, filtering and masking images,
making it a versatile tool for users looking to enhance their image editing capabilities
Note
Kanvas is enabled by default and available in a unified Control interface in both ModernUI and StandardUI
Legacy Img2Img interface continues to use standard Gradio image handling
Stage
Stage is the main container for the Kanvas and contains two layers: image layer and mask layer
Each of the layers can contain multiple objects
Tip
To have a full-screen Kanvas experience, collapse left and right sidebars and output panel
Working with Objects
Objects can be images, paint shapes or text and are organized in groups on each of image and mask layers
Kanvas allows you to work with any object on either layer: each object can be selected, moved, resized, cropped or deleted independently
Example:
1. Upload image
2. Click on image to select it
3. Click on Move/Resize button
4. Move or resize image using mouse or touch gestures
5. Upload another image, etc...
Tip
By default, Kanvas stage is scaled to fit viewable area
This may result in pixel-offset between mouse pointer and actual object position
To perform precise editing, use zoom lock button to disable auto-scaling and work at 1:1 pixel ratio
Tip
To pan entire stage when its zoomed in, hold control and drag with mouse or touch gestures
Note
Size indicator in the toolbar shows current stage size
Text vs Image vs Inpaint
When you start processing, objects in both layers will determine which workflow SD.Next will use
- All objects on the image layer will be merged into single image and passed as input to SD.Next
- All objects on the mask layer will be merged into single mask and passed as input to SD.Next
SD.Next will then decide which workflow to use based on the presence of image and/or mask
- If image is empty, SD.Next will use standard text-to-image workflows
- If image is not empty, SD.Next will use image-to-image workflows
- If mask is not empty, SD.Next will use inpainting workflows
Note
Before sending Kanvas to SD.Next processing, make sure to deselect any selected objects
Toolbar
Layer Selection
Select active layer by clicking on either image layer or mask layer button in the toolbar
Upload / Remove / Reset
Use upload button to upload images to the active layer (image or mask) depending on the current selection
You can upload multiple images one by one and each immage will be added as a separate object on the active layer
Alternatively, you can drag-and-drop an image directly onto the stage and they will be added as separate objects on the active layer
Use remove button to remove any selected object from the active layer
Remove button only affects currently selected object on the active layer which allows you to delete specific objects without affecting other objects on either layer
For example, you can select and delete one image or you can select and delete line segment which you've painted
Use reset button to clear all objects from both layers and reset the stage
Opacity
Use opacity slider to adjust opacity of any selected object on either image or mask layer depending on the current selection
Move / Resize
Use move/resize tool to move or resize any selected object on either image or mask layer depending on the current selection.
Tip
If you move objets around the stage, you may end up with large empty areas around the objects
Simply double-click on an empty area to automatically resize the stage to fit all objects
Crop
Use crop tool to crop any selected object on either image or mask layer depending on the current selection
Paint
Use free paint tool to draw on either image or mask layer depending on the current selection
Outpaint
Outpaint is achieved by
1. Uploading an image to image layer
2. Resize image by changing its resolution to desired size
3. Select move/resize tool and move the image to a desired position on the stage
Optionally resize image, although that is not required
4. Click on outpaint button to enter outpaint mode
5. Set outpaint expand and blur parameters as necessary
6. click on outpaint button again to apply outpainting
7. Start processing
Note
Larger the expand value, more overlap will be between existing image and outpainted area so model can blend them better
Important
For outpainting to take effect, it is necessary input -> denoising strength in SD.Next processing settings
Recommended values are 0.65-0.85
You may need to re-roll a few times to get desired results
Filters
Use filter tool to apply various filters to any selected object on either image or mask layer
depending on the current selection
To use filter tool:
1. Select an object
2. Click on filter button
3. Select desired filter from the dropdown menu and adjust filter parameters as needed
4. Click on filter button again to apply the filter
Text
Use text tool to add text objects by specifying font, color, brush mode and text content in the toolbar
and then dragging a text box on the stage from top-left to bottom-right
Kanvas will auto-size text to fit inside the box
Note that text will be drawn on the active layer (image or mask) depending on the current selection
Zoom / Scale
Zoom in/out using mouse wheel, toolbar buttons or touch gestures
Use zoom lock button to toggle auto-scaling of the stage to fit viewable area
When zoom lock is enabled, stage will remain at 1:1 pixel ratio for precise editing
Settings
Server-side Masking
SD.Next further enhances Kanvas capabilities by providing advanced masking options in the input panel
For example, you can skip drawing a mask in the Kanvas mask layer and instead use Auto-segment or Auto-mask in the Input panel to generate a mask based on the uploaded image
Example auto-mask using BEN2 model:
Aditionaly, any server options are automatically applied to Kanvas mask when processing images: - Blur: applies Gaussian blur to the Kanvas mask - Dilate / Erode: shrinks or expands the Kanvas mask
Any server-side mask options can be rendered to preview panel before processing
Disable Kanvas
Tip
To disable Kanvas module and enable standard Gradio image handling, set the environment variable
SD_DISABLE_KANVAS=true
Implementation
Kanvas is maintained in a separate repository: sdnext-kanvas and is included as a submodule in the main SD.Next repository
Kanvas is built using TypeScript and leveraging the power of Konva.js library for canvas manipulation