Skip to main content

Tools

Overview​

In Kritzel, a Tool represents an active state that determines how user input (like mouse clicks, touches, and pen strokes) behaves on the canvas. Because Kritzel is a state machine, only one tool can be active at a time. The active tool intercepts all pointer events and executes its specific logic to perform actions such as drawing, selecting, or erasing.

Kritzel provides a versatile set of default tools like the Selection Tool, Brush Tool, Line Tool, Shape Tool, and Text Tool. You can also customize existing tools or register entirely custom tools to extend functionality.

Managing the Active Tool​

You can programmatically change the currently active tool using the API. This is useful when you want to build your own custom toolbar or trigger tool changes via keyboard shortcuts.

Disabling and Enabling Tools​

If your application needs to temporarily lock the canvas to prevent user interaction (for example, during a loading state or when opening a modal), you can disable and enable tool interactions.

Customizing and Registering Tools​

You can register custom configurations for the built-in tools or even implement your own specialized tools by extending the base tool class. Once registered, these tools can be selected just like the default ones.

  • Tool activation (changeActiveTool())
  • Tool configuration (registerTool())
  • Tool interaction (enable(), disable())

For a comprehensive view, see the API Reference.