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


Float the DrawerJs in Redactor's Textarea

  • Click on the Canvas Properties button provided by DrawerJs.
  • Select Floating from the dropdown menu and click on Save.
Change the properties of the canvas element.
  • The floating setting will automatically switch the canvas to transparent mode.
  • You can switch back to non-transparent mode using the Canvas Properties menu.
A floating canvas element in transparent mode.
  • Click on the Move Canvas button and hold down the mouse button while moving the canvas element.
A floating canvas element is moved.
  • Release the mouse button to place the HTML canvas element at the target position.
A floating canvas element is moved.

Set DrawerJs in Redactor's Textarea to Fullscreen

  • Click on the Enter Fullscreen Mode button provided by DrawerJs.
The canvas element should be set to fullscreen.
  • DrawerJs expands such that it fills the complete textarea of Redactor.
The canvas element is set to fullscreen.