LightweightWhiteboard:Drawing Tools

All tools draw with the left mouse button. The right mouse button has no function on the board. Every tool also has a key, shown in the button tooltip.

Tool	Key	Options
Pen	P	Size
Eraser	E	Size
Line	L	Size
Arrow	A	Size
Rectangle	R	Size, Outline or Filled
Ellipse	O	Size, Outline or Filled
Triangle	T	Size, Outline or Filled
Fill bucket	F	Tolerance
Pick color	I	None

The keys work in upper and lower case. They do nothing while you type in a text field, for example in the color dialog, or while Ctrl, Alt or Cmd is held.

Size

The Size slider sets the line width for the pen, the eraser and all shapes. The range is 1 to 100 pixels. The size is measured in board pixels, so it does not change with the zoom level.

Press [ to make the size smaller and ] to make it larger. Each step changes the size by about 15 % of the current value, but at least by 1 pixel.

The slider is hidden for the fill bucket and the color picker.

Pen

The pen draws a smooth freehand line in the current color. A single click draws a dot. While the pen is active, the mouse pointer is a circle that shows the size of the pen.

Eraser

The eraser works like the pen but paints white (#ffffff). It does not make pixels transparent. On a PNG with transparent areas, erased parts become white.

Shapes

Press the mouse button at the start point, drag and release at the end point. A preview follows the mouse while you drag.

• Line draws a straight line.
• Arrow draws a line with a filled arrowhead at the end point. The head grows with the size.
• Rectangle and Ellipse fill the box between start and end point.
• Triangle draws a triangle in the box between start and end point. If you drag downwards, the tip points up. If you drag upwards, the tip points down.

A drag shorter than one pixel draws nothing.

Outline or filled

For rectangle, ellipse and triangle the toolbar shows the buttons Outline and Filled. Outline draws only the border with the current size. Filled fills the whole shape with the current color. Lines and arrows have no fill mode.

Holding Shift

Hold Shift while you drag to constrain the shape:

Shape	With Shift
Line, Arrow	The angle snaps to steps of 45°.
Rectangle	Square
Ellipse	Circle
Triangle	Equilateral triangle

You can press or release Shift during the drag. The preview updates right away.

Cancelling

Press Esc during a drag to cancel the stroke or shape. Nothing is drawn.

Fill bucket

Click on the board to fill the connected area around that point with the current color. The fill spreads to the left, right, top and bottom, not diagonally.

The Tolerance slider (0 to 100 %) sets how much a pixel may differ from the clicked pixel and still be filled. At 0 % only pixels with exactly the same color are filled. Higher values also fill similar colors, which helps with anti-aliased edges. The tolerance applies to each color channel and to transparency.

The filled pixels are always fully opaque. Clicking an area that already has the current color changes nothing.

Pick color

Click on the board to take the color of that pixel as the current color. You can also hold the button and drag to pick continuously. When you release the button, the board switches back to the tool you used before.

Transparent pixels are picked as they look on the white board. A fully transparent pixel gives white.

Clear board

The Clear board button in the toolbar fills the whole board with white. Clearing is one step in the history and can be undone.

Undo and redo

Every stroke, shape, fill, inserted image and clear is one step. Undo and redo use the normal VS Code commands, so the toolbar buttons and the usual keyboard shortcuts (Ctrl+Z for undo) both work. The extension adds no shortcuts of its own for this. Which key does redo depends on your VS Code key bindings.

The history keeps up to about 384 MB of image data per board. When it gets larger, the oldest steps are dropped and can no longer be undone. Reverting the file also clears the history. See Files and Saving.