Skip to main content

Infinite Canvas Gallery

This page demonstrates how to use <kritzel-editor> as a read-only infinite canvas for displaying scattered visual content. Inspired by infinite-canvas art experiences, each artwork is placed at an arbitrary coordinate across a large 2D world. Visitors can pan freely and scroll to zoom in on individual pieces without any drawing or editing tools in the way.

Prerequisites​

Complete the Quick Start guide to have a working <kritzel-editor> rendered in your application. This example builds on that setup.

This example makes use of the following core concepts. Click on the links below to go into the details:

  • Objects — loading images with KritzelImage.fromUrl() and placing them at world-space coordinates
  • Viewport — setting an initial zoomed-out overview with setViewport()
  • Tools — reducing the toolbar to a single selection tool for a read-only experience
  • Components — configuring the editor for a non-editable presentation mode

Twenty artwork thumbnails — sourced from placehold.co as dummy images — are placed in loose clusters across a ~4000 × 2700 world-space canvas. Visitors pan to travel between clusters and scroll to zoom into individual pieces.

The key detail: maxWidth and maxHeight on each KritzelImage.fromUrl call must match the intended display size. The default constraints are 300 × 300, so images larger than that are silently scaled down unless overridden.