Drawing Annotation on Storyline Slide
Demo: https://360.articulate.com/review/content/518383b2-1161-408d-b9f5-adb9a6f57a11/review
Inspired by code discussed on:
https://img.ly/blog/how-to-draw-on-an-image-with-javascript/
Using Charts in your Storyline | Articulate - Community
About
This is a brief example of using an HTML canvas element to enable annotation on a Storyline slide. The example displays an image on a slide, sets a few variables, and the accessibility tags of a some slide objects. It then triggers a JavaScript trigger to create a canvas over the image, and then watches the mouse buttons and movement to allow drawing on the canvas.
How it works
A canvas element is created, filled with the specified base image, and inserted below a small rectangle (canvasAnchor) that is the same width as and placed directly above the image.
Another rectangle (canvasClickArea) overlays and is sized to match the image. This is the area that allows drawing on the canvas (where the mouse is watched).
Brush width and color can be controlled. The drawing can be cleared. It also resizes with the slide.
To improve
The events to watch the mouse and clear button should be better handled to allow removal when a new canvas is created.
A mechanism to allow a blank base (clear) should be reinstated. Right now it just relies on the use of the initial image from the slide. Both options have their uses.
Since the canvas is a raster image, resizing to very small and then very large results in poor image quality.
The image can be extracted from the canvas. This could be saved or printed.
More drawing options are available with the canvas element.
Credit: X-ray images from https://learningradiology.com/
