Forum Discussion
Drawing Annotation on Storyline Slide
Nathan_Hilliard Hi, I'm not really great with JavaScript so hoping you can help. I am trying to create a program where the learner can draw on a blank white canvas and then compare what they drew to an image. It doesn't need to score them on how accurate they are. However it would be great if it could.
The details of the latest version are described in the post at Scoring User Drawn Images in Storyline | Articulate - Community. Most of the drawing functionality is in the second JavaScript trigger on the Base slide layer.
You could probably extract that trigger and the triggers from the Drawing Controls layer, paste them into a new project, and add (and set) the Storyline variables referenced inside the triggers or on then Drawing Controls layer.
You would also need to copy the Picture 1 object and cavasAnchor_0 object from the slide Base layer. The anchor just provides a place to attach the canvas. Picture 1 provided the backdrop and the size details for the created canvas. Both have Accessibility Alternate Text set to a specific value. You could replace the Picture with another, or a blank image of a set size, and set the Alternate text to use it.
This project is older and experimental. There are now better and more refined ways to integrate it with the Storyline slide, and the code could be greatly improved.
You should also look at the inspiration link at https://img.ly/blog/how-to-draw-on-an-image-with-javascript/ for more details about drawing on the canvas.