# Draw on html5 output slides

**URL:** <https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476>\
**Category:** Feature Requests\
**Created:** [December 2, 2020, 5:33am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476 "2020-12-02T05:33:07Z")\
**Posts on this page:** 1\
**Showing post:** 12

<div class="post-metadata">

**Author:** ![phuongdao](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongdao/32/6290_2.png) [@phuongdao](https://talk.atomisystems.com/u/phuongdao)\
**Post date:** [April 27, 2023, 9:45am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/12 "2023-04-27T09:45:19Z")

</div>

Hi,

If you are looking for a simple and quick solution (only supports line drawing), please check the following sample project:  
[CanvasDrawing\_2.approj](https://talk.atomisystems.com/uploads/short-url/5aHjsVPM6jzzKepy67ob9zObiRt.approj) (304 KB)

You can apply this solution for your project with simple steps:

- Open the sample.
- Go to ActivePresenter \> Project \> Properties \> Interactivity and copy the JavaScript action into your project.
- Add an apDrawingData text variable to your project (see [How to Add Variables in eLearning - Atomi Systems, Inc.](https://atomisystems.com/tutorials/ap8/how-to-add-variables-in-elearning/) for detail).

How it works:

- Click the Draw Tools button in the player toolbar to enter the drawing mode. Click again to exit this mode.
- In the drawing mode, right-click to change line color and line width.

I have not tested this sample well so please let me know if you find any problem.

Regards,

---

_[View the full topic](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476)._