Drawing Tools & Brush Styles

3 min read

PinePaper’s drawing system provides 6 professional tools for freehand artwork on the canvas.

Activating Drawing Mode

app.setBackgroundMode('drawing');

Drawing Tools

Tool Description Default Settings
pen Smooth freehand strokes with round caps Width: 3, Cap: round
ink Pressure-sensitive ink brush with variable width Width: 2-6, Taper: on
marker Semi-transparent wide strokes Width: 20, Opacity: 0.5, Blend: multiply
spray Airbrush spray of scattered dots Radius: 20, Density: 30
eraser Removes drawn strokes Width: 20
fill Fill enclosed areas or canvas background 3-stage detection

Configuration

setDrawColor(color)

Set the current drawing color.

Parameters:

  • color (string): CSS color value (hex, rgb, named)
app.setDrawColor('#ef4444');

getDrawColor()

Get the current drawing color.

Returns: string

const color = app.getDrawColor();

setDrawWidth(width)

Set the current brush width.

Parameters:

  • width (number): Stroke width in pixels
app.setDrawWidth(5);

getDrawWidth()

Get the current brush width.

Returns: number

const width = app.getDrawWidth();

Background Mode

getBackgroundMode()

Get the current background mode.

Returns: string - 'drawing', 'generator', or 'none'

const mode = app.getBackgroundMode();

setBackgroundMode(mode)

Switch between background modes.

Parameters:

  • mode (string): 'drawing', 'generator', or 'none'
app.setBackgroundMode('drawing');

Freehand Drawing

startFreehand(point)

Begin a freehand stroke at the given point. Used internally by the drawing tool handlers.

Parameters:

  • point (paper.Point): Starting point
app.startFreehand(new paper.Point(100, 100));

endFreehand()

Complete the current freehand stroke.

app.endFreehand();

Cleanup

clearDrawings()

Remove all freehand drawings from the canvas.

app.clearDrawings();

Fill Tool

The fill tool uses 3-stage detection:

  1. Stroke detection — If the click point hits an existing stroke, fill that stroke with the current color
  2. Path containment — If the click point is inside a closed path, fill that path
  3. Canvas background — If no stroke or path is hit, fill the entire canvas background
// Fill tool is activated via the drawing toolbar
// Detection happens automatically on click

Stroke Properties Reference

Property Values Description
strokeCap 'round', 'square', 'butt' Line end style
strokeJoin 'round', 'miter', 'bevel' Corner style
dashArray [dash, gap] Dashed line pattern

Custom Brush Examples

Calligraphy Brush

const path = new paper.Path();
path.strokeColor = 'black';
path.strokeWidth = 3;
path.strokeCap = 'butt';

Highlighter

const path = new paper.Path();
path.strokeColor = new paper.Color(1, 1, 0, 0.5);
path.strokeWidth = 20;
path.strokeCap = 'round';
path.blendMode = 'multiply';

Dotted/Stipple

const path = new paper.Path();
path.strokeColor = 'blue';
path.dashArray = [2, 8];