Skip to main content

Image Annotation Studio

This example demonstrates a focused image annotation experience built with Kritzel. It centers a background image on the canvas and exposes a custom bottom toolbar with clickable color circles for sketching plus a mode switch for sketch and text.

Prerequisites​

Complete the Quick Start guide to get a working Kritzel editor in your React app.

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

  • Tools - registering multiple brush tools with fixed colors and switching between them programmatically
  • Objects - seeding a centered background image as non-interactive scenery
  • Tools - driving editor behavior from a custom external toolbar via setActiveTool()

Screenshot-Style Annotation Canvas with External Color Tools​

Users pick a color from circular swatches in a custom bottom toolbar, then sketch directly over the image. A segmented mode control switches between brush drawing and text placement, while separate icon controls expose undo, redo, and zoom. The built-in editor controls are hidden so all interaction flows through the React UI.

The background image is loaded from onIsReady with KritzelImage.fromUrl() and centered on the canvas. The page checks existing objects before insertion so the image is added only once. Each color swatch registers a brush tool with a fixed stroke color; clicking a swatch updates React state, synchronizes the text-tool color, and calls setActiveTool(...) through the editor ref.