How to use DrawerJs

Start Drawing

Click on an image and it changes into an empty HTML canvas element. Now you can start working on it.

Once you're done filling your canvas, click outside of the canvas element. That will stop the edit mode and automatically convert your HTML canvas element into an image.

The canvas data is stored either in hidden sections of your web site or in other persistent storages, such as HTML5 localStorage.

When you click on an image again, it turns back into edit mode. Technically, the image is replaced with an HTML canvas element and the stored canvas data is loaded to show your last drawings.

Video: Freehand Drawing and Adding a Text

Video: Drawing Shapes


In this section, you will find detailed instructions on how to use our HTML canvas editor DrawerJs.

Check out our documentation to learn how to get DrawerJs up and running and how to configure it.