View source for 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.

{| class="wikitable"
! Tool !! Key !! Options
|-
| [[#Pen|Pen]] || <code>P</code> || Size
|-
| [[#Eraser|Eraser]] || <code>E</code> || Size
|-
| [[#Shapes|Line]] || <code>L</code> || Size
|-
| [[#Shapes|Arrow]] || <code>A</code> || Size
|-
| [[#Shapes|Rectangle]] || <code>R</code> || Size, Outline or Filled
|-
| [[#Shapes|Ellipse]] || <code>O</code> || Size, Outline or Filled
|-
| [[#Shapes|Triangle]] || <code>T</code> || Size, Outline or Filled
|-
| [[#Fill bucket|Fill bucket]] || <code>F</code> || Tolerance
|-
| [[#Pick color|Pick color]] || <code>I</code> || 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 <code>Ctrl</code>, <code>Alt</code> or <code>Cmd</code> 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 <code>[</code> to make the size smaller and <code>]</code> 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 (<code>#ffffff</code>). 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 <code>Shift</code> while you drag to constrain the shape:
{| class="wikitable"
! Shape !! With Shift
|-
| Line, Arrow || The angle snaps to steps of 45°.
|-
| Rectangle || Square
|-
| Ellipse || Circle
|-
| Triangle || Equilateral triangle
|}
You can press or release <code>Shift</code> during the drag. The preview updates right away.

=== Cancelling ===
Press <code>Esc</code> 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 (<code>Ctrl+Z</code> 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 [[LightweightWhiteboard:Files and Saving|Files and Saving]].

{{LightweightWhiteboard Nav}}