Brush Styles

PinePaper’s drawing system uses Paper.js paths for freehand drawing.

Basic Drawing

const path = new paper.Path();
path.strokeColor = '#FF0000';
path.strokeWidth = 5;
path.strokeCap = 'round';
path.strokeJoin = 'round';

// Add points
path.add(new paper.Point(100, 100));
path.add(new paper.Point(150, 120));
path.add(new paper.Point(200, 100));
path.smooth();

Stroke Properties

Brush Style Examples

Calligraphy Brush

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

Dotted/Stipple Brush

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

Highlighter/Marker

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

Spray/Airbrush Effect

function sprayBrush(center, radius, density, color) {
  for (let i = 0; i < density; i++) {
    const offset = new paper.Point({
      angle: Math.random() * 360,
      length: Math.random() * radius
    });
    const dot = new paper.Path.Circle({
      center: center.add(offset),
      radius: Math.random() * 2 + 0.5,
      fillColor: color
    });
    dot.opacity = Math.random() * 0.5 + 0.2;
  }
}

Drawing Configuration

Access via app.config:

app.config.drawColor = '#FF0000';  // Current color
app.config.drawWidth = 5;          // Current width

Activating Drawing Mode

app.setBackgroundMode('drawing');