The drawing interaction allows painting on a canvas, with or without a predefined background image. A missing element so far has been text tool: text needs to be drawn with the mouse, there is no text in a canvas.
This issue is about adding a text tool to the drawing interaction. The following features are required:
- Add multiple text elements to the painting
- Set the position of the text, allow repositioning at a later moment
- Change the size of the text (and maybe other properties such as the text color)
- Edit text at a later moment, e.g. to fix a spelling error
- Delete text elements without deleting the entire painting
- When submitting the question item and re-opening again (if allowed by the item configuration), the text elements must be still editable (continue your work before the final submission)
The implication of this new requirement are large fold. Technology wise this is not possible with the current drawing editor which is based on a single canvas. When painting something it is painted directly on the canvas. Adding text with this technology would not allow to move or edit the text at a later stage.
To solve the problem the drawing tool is implemented from scratch using the fabric.js library. The library offers many tools for drawing single objects and render them on a canvas without loosing the objects itself.
Since the implementation of the drawing tool is completely new it needs to be tested carefully will all kind of browsers on mobile and desktop browsers with different operating systems.