View Controls

Control the canvas view for panning, zooming, and navigation.

Canvas Size

Set Canvas Size

// By preset
app.setCanvasSize('1080x1080');  // Square
app.setCanvasSize('1920x1080'); // HD
app.setCanvasSize('1080x1920'); // Vertical

// Custom dimensions
app.setCanvasSize('custom', 800, 600);

Get Canvas Size

const size = app.getCanvasSize();
// { width: 800, height: 600, preset: 'default' }

Available Presets

View Properties

// View center
const center = app.view.center;

// View size
const size = app.view.size;

// View bounds
const bounds = app.view.bounds;

Zoom

// Zoom in
app.view.zoom *= 1.2;

// Zoom out
app.view.zoom *= 0.8;

// Reset zoom
app.view.zoom = 1;

Pan

// Pan by offset
app.view.center = app.view.center.add(new paper.Point(50, 0));

// Center on item
app.view.center = item.position;

Fit Content

// Fit all items in view
const bounds = app.textItemGroup.bounds;
if (bounds) {
  app.view.center = bounds.center;
  // Adjust zoom to fit
}

Canvas Resize Events

window.addEventListener('canvasSizeChanged', (e) => {
  console.log('New size:', e.detail.width, e.detail.height);
});

Background Color

// Set background color
app.setBackgroundColor('#1e293b');

// Get background color
const color = app.getBackgroundColor();