How to use DrawerJs

Usage as a Redactor Plugin

Select DrawerJs from Redactor’s toolbar.

A popup appears that lets you specify the size of the HTML canvas element to be inserted.

Once the canvas has been inserted, you can use it just like you would use the standalone version.

Video: Insert a DrawerJs Canvas Element in Redactor

Video: Insert a DrawerJs Canvas Element in Redactor

Click on the Canvas Properties button provided by DrawerJs.

Select Floating from the dropdown menu and click on Save.

The floating setting will automatically switch the canvas to transparent mode.

You can switch back to non-transparent mode using the Canvas Properties menu.

Click on the Move Canvas button and hold down the mouse button while moving the canvas element.

  • Release the mouse button to place the HTML canvas element at the target position.

Set DrawerJs in Redactor’s Textarea to Fullscreen

Click on the Enter Fullscreen Mode button provided by DrawerJs.

DrawerJs expands such that it fills the complete textarea of Redactor.