Interactive ink canvas

Now you are aware of the most important APIs of iinkTS Canvas let's dive into InteractiveInkCanvas object.

The InteractiveInkCanvas object relies on a Raw Content type, and allow you to benefit from all iink interactive features, such as lasso selection, gestures and math solving. This canvas comes with a set of utilities and is highly flexible due to its configuration options.

Canvas options

Recognition capabilities options

While the InteractiveInkCanvas object comes with a default configuration you can easily customize it, by providing your own options on creation. The main configuration options that you may consider are:

The classification configuration with the recognition.raw-content.classification.types property according to your needs, to control the list of content types that can be identified by the ink strokes classifier. Default value is "text", "math", "shape", "decoration", "drawing".
The recognition configuration with the recognition.raw-content.recognition.types to control the list of content types that are recognized after classification. Default value is "text", "math", "shape".
If you want to perform text recognition, define your recognition language with the recognition.lang property. You can either use:
- The mul_Latn value to recognize several latin languages.
- A language value to recognize a specific language, by default recognition.lang is set to en_US.

Customization example

Refer to this example to get the entire list of options, including the options described above.

View demo Get source code

You can also refer to the configuration reference page that will give you further details for some options.

Gesture options

There is nothing particular to do to benefit from gestures, as iinkTS and the recognition server will take care of detecting and applying the effect of the gestures from the provided input without any plumbing needed.

You can customize the gestures you want to use with the recognition.raw-content.gestures property: By default "underline","scratch-out","strike-through","surround" are enabled. You can also adjust the action they trigger using the corresponding gesture action property.

View demo Get source code

Menu customization

We provide a set of ready-to-use menus:

A styling menu, which allows you to choose the content color, thickness, etc. For more details on styling parameters, see next section.
An tool menu, which allows you to choose the intention of the event on the content, such as pen when writing or drawing some content, eraser when aiming to erase some content.
An action menu, allowing you to choose the action to be applied to the content, such as delete, convert, ...
A context menu that allows you to display the list of possible actions on the current selection.

You can also access and customize the capabilities of your entire canvas at any time using the graphical menu "≡ → ".

All you have to do is configure whether you want to show or hide these menus:

View demo Get source code

Styling

You can modify the styling properties:

For all items (ink, text, shapes) you can set the width, color, opacity and fill style. In addition for text, you can set the fontSize and choose the fontWeight (normal or bold). This can be done with the styling menu, or directly in your code:

canvas.updateSymbolsStyle([stroke1.id], {  width: 42, color: "#808080" , fill: "#ffff00" , opacity: 50 })
canvas.updateTextFontStyle([text.id],{ fontSize: 20, fontWeight: "bold" })

You can also adjust the canvas grid styling with the rendering.guides.* properties. For example:

const options = {
  configuration: {
    rendering: {
      guides: {
        gap: 25,
        type: "line"
      }
    }
  }
}

You can customize background, menu panels, and input appearance via cssVars CSS custom properties.

View demo Get source code

Reference documentation

To gain a more advanced understanding, you can review the architecture of InteractiveInkCanvas, and its main Websocket exchanges with the iink back-end server.