Add Drawing Board


Thanks to this module you can now create your customized drawing area. Define your buttons, your settings and of course your interactivities. This module is perfect for a kid app or note-taking.


  1. First download the .zip HTML module right here: drawing module
  2. Then create an HTML component.
  3. Insert your module in your HTML component.
  4. You just created an empty drawing area without button.

Now it's time for you to create your interface. Let your imagination speak!

Here are the available actions:

  • Change size: increase or decrease the size of the pencil or of the rubber
  • Change colour: create your own colour palette 
  • Eraser mode: use the rubber to erase your mistakes
  • Pencil mode: switch between the rubber and the pencil
  • Erase web stockage: erase the back-up
  • Undo: erase the last drawing line (backward)
  • Redo: cancel the last undo (froward)
  • Reinit: erase everything to start a new drawing

With these actions you can create buttons and commands with of course animations made in PandaSuite. Here are some examples to draw your inspiration: 

  • Colour selection: use a shape and a multi-state to create an enlargement effect

  • Size selection: play with opacity and multi-state 

  • Pencil or rubber: use a multi-state to change the writing 

  • Button effect: use a multi-state (again) to play with the size when users click on the button

Get free your imagination with this module. Mix different animations, components, your content, add picture behind your drawing area... Have fun! 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.