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);

// Unbounded canvas (infinite workspace)
app.setCanvasSize('unbounded');

Get Canvas Size

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

Available Presets

Zoom

zoomIn()

Zoom in by a 1.2x factor. Maximum zoom: 5x.

app.zoomIn();

zoomOut()

Zoom out by a 1.2x factor. Minimum zoom: 0.1x.

app.zoomOut();

resetZoom()

Reset zoom to 1.0 and center the view.

app.resetZoom();

getZoomLevel()

Get the current zoom level.

Returns: number

const zoom = app.getZoomLevel();
console.log(`Current zoom: ${zoom}x`);

Pan

panBy(dx, dy)

Pan the view by a relative offset, adjusted for current zoom level.

Parameters:

• dx (number): Horizontal offset in pixels
• dy (number): Vertical offset in pixels

app.panBy(100, 0);   // Pan right 100px
app.panBy(0, -50);   // Pan up 50px

panTo(x, y)

Pan the view to center on specific coordinates.

Parameters:

• x (number): Target X coordinate
• y (number): Target Y coordinate

app.panTo(400, 300);   // Center view on (400, 300)

getViewCenter()

Get the current view center coordinates.

Returns: { x: number, y: number }

const center = app.getViewCenter();
console.log(`View centered at (${center.x}, ${center.y})`);

Fit Content

fitContentInView()

Auto-zoom and pan to fit all canvas items within the visible area.

app.fitContentInView();

Pan Mode

Pan mode enables click-and-drag navigation across the canvas.

enablePanMode()

Activate pan mode. The cursor changes to a grab icon.

app.enablePanMode();

disablePanMode()

Deactivate pan mode and return to the previous tool.

app.disablePanMode();

togglePanMode()

Toggle pan mode on/off.

app.togglePanMode();

isPanModeActive()

Check if pan mode is currently active.

Returns: boolean

if (app.isPanModeActive()) {
  console.log('Pan mode is active');
}

Tip: Hold the spacebar to temporarily enable pan mode while in any tool.

Unbounded Canvas

Unbounded canvas mode removes all fixed boundaries, providing an infinite workspace.

Enabling

app.setCanvasSize('unbounded');

Behavior Differences

Usage

// Enable unbounded mode
app.setCanvasSize('unbounded');

// Items can be placed anywhere
const text = app.create('text', { content: 'Far away', x: 5000, y: 5000, fontSize: 48 });

// Pan to the item
app.panTo(5000, 5000);

// Fit all items in view
app.fitContentInView();

View Properties

Direct access to Paper.js view for advanced use:

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

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

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

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();