Frequently Asked Questions

What is an HTML <canvas> element?

The HTML <canvas> element is used to draw graphics on a web page. The drawing is done programmatically using some JavaScript code. In order to offer your end users a nice WYSIWYG editor, however, you would need to develop your own JavaScript library for drawing things like shapes or enabling some kind of freehand drawing.

Why do I need your HTML canvas editor?

Our JavaScript HTML canvas library enables you to add shapes or text to an HTML canvas element without writing a single line of code. Just select a shape from the toolbar and click onto the HTML canvas element to start drawing using your mouse (or finger when using a touch device, respectively). The same goes for freehand drawing: Simply start drawing without worrying about how to programmatically draw 2D graphics using JavaScript.

What's the difference between a WYSIWYG text editor and your HTML canvas editor?

A WYSIWYG text editor such as Imperavi's Redactor provides a convenient way to write and edit text on your web page. With our HTML canvas editor DrawerJs, we want to deliver the same convenience when creating drawings, sketches, shapes, and more.

What happens after my drawing or sketch is finished?

Just click outside of the HTML canvas element. Our JavaScript library will automatically convert your drawing into an image, which will replace the HTML canvas element. If you want to work on your sketch or drawing again, click on the image to enable DrawerJs' edit mode, which brings back the HTML canvas element that you can edit. The previously saved canvas data is loaded back into the canvas element and you can continue where you left off.

Where are the drawings being saved?

Our JavaScript library can be configured to save the canvas data in various places. For example, the serialized JSON can be attached to the underlying image element or to a different HTML element that serves as a container. Alternatively, you can define a custom function that is called whenever the canvas element needs to save its data. You can then upload the canvas data to your server, for instance, or store it locally within an in-browser database like PouchDB or HTML5 LocalStorage.

Can I change the appearance of your HTML canvas editor and translate the tooltips to my language?

Yes, you can modify the appearance of DrawerJs using the configuration object. Our JavaScript canvas editor can be used both on desktops and on touch devices. The configuration distinguishes between these two environments and optimizes toolbars, context menus, and object controls accordingly. You can also tailor the colors of the color picker and the available fonts for text formatting to your needs. All menu items, tooltips, and buttons are fully localized — just add a file with your translations or modifications.

What are the requirements for your HTML canvas library?

DrawerJs does not depend on any JavaScript libraries or frameworks, so it should work with any HTML or JavaScript framework.
For example, we are using DrawerJs in our upcoming cloud-based, cross-platform application for organizing and sharing notes, TheNoteTank.
For more information, please have a look at our documentation.