PaperJS Development

Use This Skill When

• Building interactive drawing or sketching applications
• Creating vector graphic visualizations
• Developing canvas-based animations
• Building tools for visual content creation
• Creating geometric visualization tools
• Developing interactive graphic editors

When NOT to Use

• Simple 2D games (consider Phaser or Three.js)
• Complex 3D graphics (use Three.js)
• Non-interactive vector graphics (use SVG directly)

Context: PaperJS Development Maturity

Undeveloped: Canvas basics; difficult coordinate math.

Target: Using PaperJS vector operations, handling paths and shapes, basic interaction.

Optimized: Complex interactive tools, optimized rendering, efficient event handling.

Core Principle

PaperJS simplifies vector graphics. Instead of manual canvas drawing and math, PaperJS provides high-level abstractions for paths, shapes, and transformations—enabling faster interactive graphics development.

Instructions

Step 1: Setup and Initialization

Install PaperJS:

npm install paper
# or via CDN in HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>

Create canvas:

<canvas id="myCanvas"></canvas>

<script>
  // Get paper ready
  paper.setup('myCanvas');
  
  // Create a simple circle
  const circle = new paper.Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'blue'
  });
  
  // Render
  paper.view.draw();
</script>

Step 2: Basic Shapes and Paths

Create and manipulate shapes:

// Circle
const circle = new paper.Path.Circle({
  center: [100, 100],
  radius: 50,
  fillColor: 'blue'
});

// Rectangle
const rect = new paper.Path.Rectangle({
  point: [50, 50],
  size: [100, 50],
  fillColor: 'green'
});

// Custom path
const path = new paper.Path();
path.add([10, 10]);
path.add([20, 20]);
path.add([30, 10]);
path.closed = true;
path.fillColor = 'red';

Step 3: Interactive Drawing

Handle mouse events:

const path = new paper.Path();

paper.tool.onMouseDown = (event) => {
  path.add(event.point);
  path.strokeColor = 'black';
  path.strokeWidth = 2;
};

paper.tool.onMouseDrag = (event) => {
  path.add(event.point);
  path.smooth();  // Smooth the path
};

paper.tool.onMouseUp = () => {
  // Path is complete
  console.log('Draw complete');
};

Step 4: Transformations

Transform shapes:

const circle = new paper.Path.Circle({
  center: [100, 100],
  radius: 50,
  fillColor: 'blue'
});

// Rotate
circle.rotate(45);

// Scale
circle.scale(2);

// Move
circle.position.x += 50;

Step 5: Animation

Create animated effects:

let angle = 0;

paper.view.onFrame = (event) => {
  angle += 1;
  
  // Update position based on angle
  circle.position.x = 100 + Math.cos(angle * Math.PI / 180) * 50;
  circle.position.y = 100 + Math.sin(angle * Math.PI / 180) * 50;
};

Step 6: Hit Testing and Selection

Detect clicks on shapes:

paper.tool.onMouseDown = (event) => {
  // Find item at point
  const hitResult = paper.project.hitTest(event.point);
  
  if (hitResult) {
    console.log('Clicked:', hitResult.item.name);
    hitResult.item.selected = true;
  }
};

Output

Deliver:

1. PaperJS Setup (HTML canvas, initialization)
2. Basic Shapes (circles, rectangles, paths)
3. Interactive Drawing (mouse event handlers)
4. Transformations (rotate, scale, move)
5. Animation Loop (frame-based updates)
6. Hit Testing (click detection on shapes)