Welcome

A few things worth mentioning

Spree - allows to retouch laid colors and more. Toggle by pressing X on keyboard. Instead of drawing - brush will be erasing recently laid color or undoing eraser.

Hotkeys - click here to show all hotkeys

Tooltips - hover over UI elements to view available descriptions.

Important notice: all settings (including presets) are stored in browser's cache. Use Import / Export features to migrate configuration.

This menu can be accessed in Help->Manual

File

Open file supports the following format types:
Image: png, jpg/jpeg, gif, bmp, webp, webm, svg
note: some image types like svg will be rasterized
Project: LBC (.lbc)
(stands for Light Brush Canvas. lbc is a Light Brush project file format)

Save as supports saving in the following format types:
Image: png, jpg
when saving as jpg, use slider for jpeg quality (0 to 10)
Project: lbc

Copy / Cut / Paste / Import / Export

Copy / Cut image or selected content:
to copy press Ctrl+C key combination on keyboard
to cut press Ctrl+X key combination on keyboard

note: ability to copy / cut content outside the program depends on browser engine

note: copying image with transparency outside the program, also depends on your current OS clipboard functionality

Paste - to paste image content onto a layer or a mask press Ctrl+V

Import Image - you can import an image that is saved on your computer.
File->Import Image and choose the image file.
This will import the image onto an active layer in your project

supported image formats for importing:
png, jpg/jpeg, gif, bmp, webp, webm, svg

Export Content
File->Export Content - this will export selected content of a layer or a mask as png. Will export whole layer or mask if no selection is active.

Selection

Selection is a feature that allows to isolate a region for a variety of uses. Applicable to both, layers and masks.
e.g. copy / cut, color fill / draw & erase within the selection etc.

Making and Modifying selections
Select menu - over on the top panel in general menu there is a Select menu drop-down. It contains various options in regard to selection control.
Area Select Tool allows to make a rectangular selection.
More on Area Select Tool here
Lasso Tool is a freehand selection making tool.
More on Lasso Tool here
Auto Select Tool allows to automatically select "similar" pixels. The criteria for pixel similarity can be set in Tool Options menu.
More on Auto Select Tool here

Use modifier keys Ctrl to Add to current selection and Alt to Subtract from current selection when using selection tools.

Additionally you may want to use Move Tool transformations to transform selections.
More on Move Tool here

Spree to selection - turn contents of spree layer into a selection by pressing Ctrl+B
note: content transparency will be transponded to a resulting selection.

From layer - contents of layer can be used for creating a selection. Content transparency will be transponded to a resulting selection. Mask presence, and layer opacity will be taken into account, when creating a selection from layer view.
Usage: select a layer, then:
Select->From Layer + (if you would like to add to selection), or
Select->From Layer - (if you would like to subtract from active selection)
Alternatively Ctrl+Click on a layer in layers tab, to create a new selection using layer.
note: in this case layer does not have to be active/selected, and a layer can be hidden.

Select content is a part of general Select menu drop-down.
Select->Select Content.
Alternatively press Ctrl+A
This will make an opaque selection of all content present on the selected layers (multiple layers can be selected).
note: mask content can be selected same way, but only one mask can be selected at a time.
Deselect / Toggle Selection
Select->Deselect to clear selection
Press Ctrl+D to toggle selection on and off.
note: this will not bring back a selection cleared by deselect method above, only the one that has been initially toggled.
Moving selection - selection can be moved by click & dragging on selected region. One of the selection tools must be in use.
Additionally, can use arrow keys on keyboard to nudge.
note: Area Select Tool has a special embedded feature - selection will not move past canvas boundary. This is especially useful for cropping.

Masks

Masks are used to hide parts of the layer without altering layer's contents.

There are two types of masks available:
Layer Mask - applies to a single layer
Clipping Mask - a layer becomes a mask for a number of layers clipped onto it

(!) Both mask types use Alpha channel, meaning that masks use transparency of their contents to hide or show layers' contents.

Controls
Use dedicated buttons and layers options drop-down.
A few extra controls include:
Disable / Enable Layer Mask - Shift+Click on mask
Move Layer Mask to another layer - Click & Drag mask to a destination layer
Copy Layer Mask to another layer - hold Ctrl+Click & Drag mask to a destination layer.
Clear Layer Mask - clicking on dedicated clear button multiple times will alternate between clear and fill.

Spree

Spree is a transparent layer to which most things you draw(or erase) goes first, before being solidified into a selected layer. This means, by using spree controls, you can retouch things you put unto a layer, beyond just undo.

Spree feature has two modes: draw and erase.
Toggle spree mode by pressing X key
or clicking Spree indicator on the left toolbar.

e.g. when using Brush Tool you can draw in draw mode, and then erase parts of what you just drew in erase mode. Leaving layer's previous contents untouched.
Similar is available for Eraser Tool too, spree erase mode will be undoing erasing, bringing original content of a layer back.

note: layer Mask does not use spree; spree is active only when drawing to a layer.

Solidify / Discard / Auto
Top panel features a spree options tab.
Auto option automatically draws contents of spree to selected layer (solidify spree) when you pick a new color.
Solidify spree button allows to manually solidify spree.
hotkey: Shift+S
Discard spree button discards contents of a spree layer

Usage
Spree indicator shows which spree mode is currently active draw / erase.
More information about Spree indicator here
Tools - many tools support and utilize Spree feature.
Check with each tool for more information.
As an example: Fill Tool, when filling to spree first - can then toggle spree mode erase, and it will change the tool to Brush and you will be able to retouch the filled region.

note on Fill Tool: to fill directly to a layer / color replace - set 'Direct' option in tool options menu.

Selection from Spree
Spree can be used to make a selection. Turn spree into a selection by:
Press Ctrl+B
or Select->Spree to selection

Undo Solidify If spree has just solidified and you would like to get back to the state before -
Use Undo and then a single Redo.

for Undo: press Ctrl+Z keys or Edit->Undo
for Redo: press Ctrl+Shift+Z keys or Edit->Redo

Image Adjustments

Image->Adjustments
HSB - Hue, Saturation, Brightness
These sliders work on offset principle. In essence any color can be turned into any other by shifting its hue, saturation, and brightness similar to an hsb color picker.

Colorize Grayscale is an option which allows to colorize pixels of no saturation (grayscale).
Tick the option and then give it some saturation along with adjusting any other sliders to your liking.

Effect Area sliders help to isolate area of effect by seeking only pixels that correspond to set limits

Color Palette

Palette is a special layer for picking color.
To show palette layer hold C key on keyboard.
You can then click anywhere on the layer to sample color from it.

Snap for Palette feature can be accessed in layers panel
Options->Snap for Palette
This feature allows to add image/color to palette layer in a live session.
1. Select a layer, that contains an image or color you would like to add to palette.
2. Pan and zoom canvas to position and scale content;
3. do Options->Snap for Palette in layers panel
(!) Snap for Palette will imprint the canvas view onto a palette

(contents of a selected layer will be imprinted onto a palette layer, of the scale and position same way you see them in canvas view)

Palette Library is a menu for managing palette presets
Access it in Other->Palette Library
Capture feature in palette library allows to capture current state of palette layer into a preset.
You can also export any preset as a .png image file.

note: resizing program window will also resize and re-position contents of a palette layer

Brush Library

Other->Brush Library
or click on the icon at the top left near brush bays

Brush Library is a menu where all brush presets are stored. You can create and modify brushes, and load them into bays to paint with.

Bay Capture / [ bay-c ]
Edit->Brush preset from bay
captures active brush (bay in top panel) into a brush preset

Layer Capture / [ layer-c ]
Edit->Brush preset from layer
creates a brush preset using content of a selected layer. You may use selection tools to isolate area which shall be the tip of the new brush. Otherwise, the whole layer will be sampled.

note: empty / transparent pixels will be truncated. If you would like to preserve empty space - manually create a new preset and choose an image from desktop (in brush tip).

Import allows to add a preset from a file.
Export allows to export selected preset to a file.

Blend Assist option sets default state of brush to blend if checked. Hold Z key to toggle blend assist on the canvas.

Preview

Preview allows to see whole canvas for reference, with effects available.
Mirror effect keeps preview horizontally reflected compared to canvas view.
Grayscale effect turns preview black and white.
Toggle preview button will show/hide preview.

Settings

Import Settings
Help->Import Settings
Export Settings
Help->Export Settings

Import and Export features help backup and migrate configurations, using .dat file.
The file will contain all presets and settings, such that you can take your Light Brush environment to another machine.
You may also choose to use separate configurations for different kinds of work. Then just backup your settings with Export and use them interchangeably using Import.

Reset All Settings
Help->Reset All Settings
Using this feature will reset everything about the program.
If issues occur after reset - you may try clearing browser's cache. (first make sure Light Brush is closed, then clear cache, then open it again)

Exiting program
please use dedicated Exit button or File->Exit, as this helps the program to tidy up before closing.

Notes:
Pen pressure may be limited on some systems due to dropped in-browser/engine support for older OS standards. But perhaps there are workarounds.

All settings (including presets) are stored in browser's cache. Use Import / Export features to migrate configuration.

Tool Options

Tool Options - tools (brush, fill, select, etc.) have additional features available in tool options menu.
The "multi-tool" icon button on top panel (top-left).

(!) Options will appear in this menu for each tool separately, when the corresponding tool is active.

Move Tool

Move Tool can be used to transform and position content, along with selections. Make a selection of layer / mask content you would like to alter, then use Move Tool features as outlined below:
More on Selection here
note: if no selection available - whole content of target layer / mask will be affected.
note: empty selections can be transformed too.
hotkey: V

Move - click & drag anywhere in the canvas view to move content. To nudge use the arrow keys on keyboard
Scale - scaling content can be done by dragging square handles on the corners and sides.
Modifiers:
hold Shift key to preserve content proportions.
hold Alt key for symmetry.
Rotate - click & drag the teardrop-looking handle located above content.
note: you may need to zoom out a bit if the handle is not apparent in the current scope.
Modifier: hold Shift for 5 degree increments snapping.

Tool Options
Position - content position can be monitored and set through X and Y fields.
(!) Position used is the center point of content.
Angle - content rotation can be monitored, set and reset through angle field; in degrees.
Dimensions - content dimensions in pixels can be monitored and set through W and H fields.
Also use dedicated buttons:
[ fit ] to scale fit content within the canvas boundaries
[ h ] to center horizontally content on a canvas
[ v ] to center vertically content on a canvas
[ reset ] to restore original content size

note: pasted or imported content that does not fit canvas boundaries - will be automatically fit. However you may still restore content's original dimensions by pressing reset button.

Auto Select Tool

Auto Select Tool helps selecting pixels that are "similar" by criterias, such as: color, and tone. Clicking on a canvas pixel will automatically select other pixels that are within range, as specified in Tool Options menu.
hotkey: W

Modifier Keys
Ctrl - hold to Add to an existing selection.
Alt - hold to Subtract from an existing selection.

Tool Options
All Layers - tool will sample any visible pixel as it appears in canvas view. Otherwise, only current layer will be sampled.
Contiguous - tool will select pixels that are directly adjacent/chained together, within clicked region. Otherwise, all matching canvas pixels will be selected.
Color - tells the tool how different color code, across Red Green Blue channels, can be for it to still be counted as similar. Number represents total COMBINED difference taken between each channel.
note: for Fill Tool, color difference is evaluated per channel, not combined.
More on Fill Tool here
Tone - is a calculated lightness value of a pixel.

Using Fill Tool - since Fill Tool has a bit different approach to determining which pixels to be affected, it may be beneficial in some cases to use Fill Tool in spree mode, to fill region, then convert spree to selection.

Selection continued...
More information on Selection feature here

Area Select Tool

Area Select Tool is a rectangular area selection tool.
hotkey: M

Modifier Keys
Ctrl - hold to Add to an existing selection.
Alt - hold to Subtract from an existing selection.

Tool Options
Make Selection of specific Width and Height dimensions:
Use dedicated W and H fields for width and height, and press
[ Make Selection ] button.
This will create a rectangular selection of secified dimensions (in pixels)
Aspect ratio lock helps creating selections of width and height dimensions relative to one another. Using W and H fields, provide ratio dimensions and activate by checking the Aspect Lock checkbox.
e.g. 1 and 1 would be a square, or another example 16 and 9 is a standard ratio for many displays.
Additionally moving any active selection with a cursor, while Area Select Tool is in use - will keep selection bound to canvas boundary.

Selection continued...
More information on Selection feature here

Lasso Tool

Lasso Tool is a freehand selection tool. Draw an outline with lasso tool to select an area.
hotkey: L

Modifier Keys
Ctrl - hold to Add to an existing selection.
Alt - hold to Subtract from an existing selection.

Color Fill is an option of Lasso Tool, available in Tool Options menu; allows to automatically fill selected area with current color.
This works for both: layer and mask.
Layer - color fills to spree
More on Spree here
Mask - affected directly, color does not matter, since masks are alpha channel based
More on Masks here
Additionally using modifier keys subtract function, while Color Fill option is active - also allows to erase spree and mask contents.

Selection continued...
More information on Selection feature here

Brush Tool

Brush Tool is a primary drawing tool; on the left toolbar. hotkey: B
Content drawn with Brush Tool first goes onto Spree layer.
More on Spree here
Both Brush and Eraser tools use Bay interface, through which multiple features like sizing, brush selection and other options are available.
More on Brush Bays here
Quick Menu allows for a quick and visual way to change the size of a brush.
Hold Q key, while hovering cursor above the canvas, and move cursor to the right to increase size, and to the left to decrease.
Blending by default is done by holding Z key and drawing with brush. Also brushes may have blending ON by default in brush preset, then holding the key will toggle such brush to draw instead of blend.
More on Brush Library here
Smoothing is a Brush and Eraser tool option (sync'd for both); it helps with drawing rounder curves.
Higher the level (0 - 7), the more prominent assistance effect will be applied to your brush / eraser strokes.
note: very slow brush work may have minimal assistance even at the highest level, to accomodate detailing.

More Brush / Eraser features are available through Brush Bay interface. More on Brush Bays here

Brush Bays

Brush Bays are slots for brushes. A brush that is loaded into a bay, then can be used to draw with. Bays have settings similar to that of a brush preset (size, opacity, flow, hardness). These can be used to modify brush on the go; these will not modify the preset in Brush Library.
You can capture bay as a brush preset Edit->Brush preset from bay.
Select bays by clicking, or by using 1, 2, ... 8 keys

Size - there are 3 ways available for changing brush size:
1) Use the size slider on the top panel. Also can use fine tune buttons in the size field.
2) Quick Menu - hold Q key and move cursor to the right to increase size, and to the left to decrease.
3) Keyboard [ ] keys

Zoom Size feature changes brush size automatically when you zoom. Brush cursor size will look same in view but will change in relation to canvas.

Size Link - allows to link sizes of multiple bays/brushes together. Brush sizes of linked bays will stay in set % proportions. You can change one brush's size and the other will update accordingly.
1. Go to / select bay that you want to link
2. Choose target bay from drop-down in size link.
3. Set size % value, that you want currently selected bay to have, in relation to target bay.
4. Activate link by checking the checkbox.
You can link multiple bays to the same target bay,
e.g. bay2-bay1, bay3-bay1 etc.

note: chaining bays is not a feature. e.g. bay1-bay2-bay3. Can do one-one and many-one.

Keep Color allows to preserve and use color in bay.
Pick color, then check 'keep color' option, and this color will be stored in current bay.
Returning to this bay will switch color to the one stored in it.
As long as the 'keep color' option is active, every newly picked color will be stored.

One Brush option allows to use the same brush bay across: Brush Tool, Eraser Tool, and Spree modes for each. Alternatively when this option is off - you can choose a separate brush bay for each of the mentioned above.

Spree mode - each bay can be chosen in relation to the spree mode 'draw' / 'erase'. To choose separate bays for each mode for the tool:
Select the tool, e.g. Brush Tool and turn OFF the One Brush option.
Now you can set bay for spree mode 'draw' by clicking on brush bay lower portion (where the brush icon is shown) and a white outline should appear around the icon, indicating that the bay is chosen for drawing.

To set bay (any bay, doesn't have to be the same one) for spree mode 'erase' click on upper portion that looks like a big dash above a brush icon. It should turn black, indicating that this bay will now be used for spree erasing.

Stamp Mode allows to draw with area sampled from the canvas. To sample area - align brush cursor with the area and press O key. This will put area under the brush into bay and activate stamp mode. Sampled area couples with the brush, and you can draw with it.
note: since the stamp resides in a bay, you can load different brushes, from Brush Library, into that same bay and the stamp will use the new brush.

Eraser Tool

Eraser Tool properties are similar to Brush Tool.
hotkey: E
More on Brush Tool here
Spree
Erasing layer content with Eraser Tool - the erase effect first goes onto a Spree layer.
Pressing X key will toggle spree erase mode and you will be able to un-erase back the content you just erased with Eraser Tool.
More on Spree here

Fill Tool

Fill Tool allows to fill layer regions with color
hotkey: G

Tool Options
Layers reference - there are a few options available when it comes to which layer to sample/use as a reference for fill.
All Layers: reference canvas view as it appears.
Top Visible: reference only the top most layer that is visible.
e.g. a layer with line art on it.
Current Layer: by default, current layer will be referenced, when the other two options are unchecked.

Direct / Spree option allows to choose whether to fill to spree(default), or directly to layer(when enabled).
Using direct to layer approach also yields ability to replace color of the region, retaining transparency.
Another use case would be making a graduated color effect by using a selection with feathered/transparent edges.
More on Selection here
Spree - when filling to spree, can toggle brush spree erase mode, by pressing X key or clicking on spree indicator. This will allow to retouch/erase filled region with a brush tool.
More on Spree here
More on Brush Tool here

Tolerance - samples existing colors on canvas in order to decide whether to fill them. Color difference (0-255) per each channel separately.
Opacity Barrier - samples existing colors on canvas in alpha (transparency) channel. Fill tool is able to fill in under partially transparent pixels. Opacity Barrier (0-100%) tells the tool how much opacity in percentages to count as a boundary for fill.
e.g. 100% means fill everything to the border of fully opaque pixels.

Selection with Fill Tool
Using the Spree to selection feature, it is possible to create selections with Fill Tool.
To do so, make sure 'Direct' option is disabled. After filling a region, you may want to adjust it with a brush, and after you are done
press Ctrl+B or Select->Spree to selection.
This method is useful, in comparison to Auto Select Tool, in a way that tolerance options are different between the two, and also the ability to retouch region with a brush.
More on Auto Select Tool here

note: another way is to use fill on a separate layer and then make selection from layer instead of Spree to selection.
More on Selection here

Color Picker

Color Picker
Access color picker by clicking on color indicator located on the left toolbar, or by pressing F key to toggle.
Color square represents current color in picker. It is located on the outside of the color picker menu. You can position square in regard to canvas, to visually approximate how the color will fit.

Eyedropper Tool is used to sample color from the canvas.
Hold Shift key and click on the canvas to sample color. Alternatively, if the Shift key is reserved as a modifier for a particular tool - use Eyedropper Tool hotkey: D
Dropper layer mode is an option available in Color Picker menu, and allows for Eyedropper Tool to sample color from selected layer at maximum opacity.
e.g. If a layer has black color semi-transparent and it looks gray on white background of a layer underneath - sampled color will be pure black. The idea is that this option should help you with transparent overlays by giving you absolute color of the region.

Spree Indicator

Spree Indicator is on the left toolbar.
It is color White for draw, and color Black for erase spree modes.
Clicking on the indicator, or pressing X key will switch between spree modes for Brush and Eraser tools.
In case when layer Mask is selected - Eraser Tool will be selected automatically in place of spree eraser.

More information about Spree feature here

Hand Zoom & Pan

Zoom controls include:
[ fit ]: will fit canvas in view; hotkey: Ctrl+0
[ 1:1 ]: will set 100% zoom, as in - 1:1 actual pixels of display you are using.
[ t ] - toggle feature allows to toggle between two most recent zoom and panning positions; hotkey: R
Quick menu features two buttons for zooming - and +. Click and hold the buttons to zoom in and out.
(to bring up Quick menu hold Q key on your keyboard)
Mouse - zooming with a mouse is available by holding Ctrl key and using mouse scroll wheel.
Manual input is also available. You can manually enter zoom level in percentages, for example number 200 means 200% = 2x zoom.

Hand Tool / Touch is activated by holding H or Space key on your keyboard.
Alternatively activate hand tool via button on the left toolbar.
You will be able to pan the canvas and pinch-zoom.
Touch keys panel with modifier keys (Ctrl, Alt, Shift) will also appear. These can be toggled on/off, to use when no keyboard is available.

Pen Pressure

Pen Pressure should work normally.
Make sure to check that the brush you are using has the corresponding pressure option enabled, and also that the brush is loaded in the bay, after the preset been changed.
More on Brush Library here
More on Brush Bays here

Troubleshooting
Browser - Chromium browsers, such as: Chrome, Edge, Opera etc. officially support pen pressure. It is known that some other browsers do not support pen pressure, for example Firefox.

Windows Ink - it is possible that on your system configuration you may need to enable or disable Windows Ink. This option is usually located in your tablet driver menu.
It is typical for Chromium browsers to use Windows Ink, in order to read pen pressure from your drawing tablet. Though, it is also possible that your system is configured differently and disabling this option may yield the proper result.

Operating System (OS)
There is currently known only one limitation - it is that pen pressure may not work on older Windows systems, such as Windows 7 and earlier. The reason is that these versions of Windows have a different approach to pen pressure. Newer browser versions have dropped support for older pen pressure standards.

Hotkeys

Hotkeys
Help->Hotkeys
Allow for feature access through keyboard key-combinations.
note: in this version of the program hotkey re-mapping is not supported.

Click here to open hotkeys list