# 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:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![qb200210](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/q/8c91f0/32.png) [@qb200210](https://talk.atomisystems.com/u/qb200210)\
**Post date:** [December 2, 2020, 5:33am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/1 "2020-12-02T05:33:07Z")

</div>

Hi, it’s a pretty common feature in any other eLearning software to allow the teacher/student to draw (some allowing multiple color) on the slides. Example like tracing a letter for a learner.

Can it be done in ActivePresenter or is there a workaround to achieve the draw effect in the html5 output? Thanks!

---

<div class="post-metadata">

**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\
**Post date:** [December 2, 2020, 6:33am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/2 "2020-12-02T06:33:27Z")

</div>

Hi,

Thanks for your suggestion.

The current version of ActivePresenter hasn’t supported this feature yet.  
We’ll consider doing it if there’s more requests from users.

Regards,

---

<div class="post-metadata">

**Author:** ![Roxie](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/r/67e7ee/32.png) [@Roxie](https://talk.atomisystems.com/u/Roxie)\
**Post date:** [December 3, 2020, 5:43pm UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/3 "2020-12-03T17:43:20Z")

</div>

Yes, Please! I would find it very useful when teaching if I could highlight, draw, and annotate on the presentation itself. I would definitely be using the program even more than I am now.

---

<div class="post-metadata">

**Author:** ![ARaza](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/araza/32/5840_2.png) [@ARaza](https://talk.atomisystems.com/u/ARaza)\
**Post date:** [November 7, 2021, 2:08am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/4 "2021-11-07T02:08:52Z")

</div>

Me too. Please consider adding this feature.

---

<div class="post-metadata">

**Author:** ![luisantafe](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/l/e9bcb4/32.png) [@luisantafe](https://talk.atomisystems.com/u/luisantafe)\
**Post date:** [December 25, 2021, 8:12pm UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/5 "2021-12-25T20:12:30Z")

</div>

Was this feature added?

---

<div class="post-metadata">

**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\
**Post date:** [December 27, 2021, 2:41am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/6 "2021-12-27T02:41:56Z")

</div>

Hi,

This feature is added in our roadmap.  
At this time, there are some tasks with higher priority so we have not implemented it yet.

Have a nice day.  
Thuy

---

<div class="post-metadata">

**Author:** ![luisantafe](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/l/e9bcb4/32.png) [@luisantafe](https://talk.atomisystems.com/u/luisantafe)\
**Post date:** [May 19, 2022, 1:58am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/7 "2022-05-19T01:58:48Z")

</div>

Im not sure if this is possible, but is there a way to use this [Create a Drawing App with HTML5 Canvas and JavaScript { William Malone }](http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/) in the current version of activepresenter? I just would like to draw on the final presentation.

Thank you.

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [May 19, 2022, 2:44am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/8 "2022-05-19T02:44:58Z")

</div>

Hi luisantafe,

Yes, you can use a Web Object to embed that drawing application into ActivePresenter:

> **[How to Embed HTML Package in ActivePresenter 8](https://atomisystems.com/tutorials/ap8/embed-html-package-in-activepresenter-8/)**
>
> Embbeding HTML package directly in a slide has never been so easy with ActivePresenter 8. So, let’s get to know how to embed HTML package now.

Regards

---

<div class="post-metadata">

**Author:** ![luisantafe](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/l/e9bcb4/32.png) [@luisantafe](https://talk.atomisystems.com/u/luisantafe)\
**Post date:** [October 19, 2022, 1:52pm UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/9 "2022-10-19T13:52:37Z")

</div>

Up this feature in the new 9 version.

Thanks

---

<div class="post-metadata">

**Author:** ![Caglar\_MERSINLI](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/caglar_mersinli/32/3845_2.png) [@Caglar\_MERSINLI](https://talk.atomisystems.com/u/Caglar_MERSINLI)\
**Post date:** [April 26, 2023, 6:33pm UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/10 "2023-04-26T18:33:47Z")

</div>

I’m waiting for this feature. any news?

---

<div class="post-metadata">

**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\
**Post date:** [April 27, 2023, 2:01am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/11 "2023-04-27T02:01:57Z")

</div>

Dear all,

We would like to extend our sincere appreciation for your interest in ActivePresenter.  
Just wanna let you know that we have considered the feature request you mentioned, and we understand how important it is to you.  
While we don’t have an exact plan to implement this feature at the moment, please rest assured that we are continuously evaluating and improving our product to meet the evolving needs of our customers.

Thank you, guys. And if you have any further suggestions or feedback, feel free to reach out to us.  
Thuy

---

<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,

---

<div class="post-metadata">

**Author:** ![luisantafe](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/l/e9bcb4/32.png) [@luisantafe](https://talk.atomisystems.com/u/luisantafe)\
**Post date:** [September 17, 2023, 1:26am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/13 "2023-09-17T01:26:04Z")

</div>

Any chance to do a short video of the process? I tried but at the end I could not make it. Thanks

---

<div class="post-metadata">

**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\
**Post date:** [September 18, 2023, 3:02am UTC](https://talk.atomisystems.com/t/draw-on-html5-output-slides/4476/14 "2023-09-18T03:02:18Z")

</div>

Hi @luisantafe,

If you get trouble when performing the steps above to make your own sample, take a look at the quick video tutorial below:

> **[drawingtools.mp4](https://drive.google.com/file/d/199q7An0bZFLavhnaqsalP6JQLvuDpYx-/view?usp=sharing)**
>
> Google Drive file.

Hope it helps.  
Regards,  
Thuy
