Skip to main content

Canvas Objects

Overview​

Everything visually rendered onto the Kritzel canvas—whether it's a brush stroke, a text block, or an image—is conceptually an Object.

All objects share a common foundational structure. No matter the specific type, every object tracks its spatial existence in the infinite canvas using standard 2D properties:

  • Position & Dimensions: x, y, width, height
  • Transforms: rotation, scale
  • Styling: opacity, backgroundColor, borderColor, zIndex

Because all objects share this base, the engine can uniformly handle hit-testing, rendering bounds, and selection outlines. Currently, tools create specific instances of sub-classed objects: KritzelPath, KritzelLine, KritzelShape, KritzelText, KritzelImage, and KritzelCustomElement.

Adding and Removing Objects​

You can manually inject objects into the canvas or remove them programmatically, bypassing the need for a user to draw them.

Querying and Filtering Objects​

Kritzel allows you to read the state of all objects currently on the canvas, or find specific objects. This is useful for building layer panels or object inspectors.

Managing Object Selection​

You can programmatically retrieve the currently selected objects, select specific objects, or clear the selection.

Grouping and Ordering​

Objects can be grouped together so they can be moved and transformed as a single unit or their z-index ordered.

  • Lifecycle (addObject(), removeObject(), updateObject(), getObjectById())
  • Queries (getAllObjects(), findObjects(), getObjectsTotalCount(), getObjectsInViewport())
  • Manipulation (group(), ungroup(), bringToFront(), sendBackward(), alignObjects())
  • Selection (getSelectedObjects(), selectObjects(), clearSelection())

For a comprehensive view, see the API Reference.