How to use DrawerJs

Drawing Shapes

  • Select a shape in the toolbar.
  • The cursor will turn into a cross. Next to it, you'll see an informational tooltip.
  • A color picker and a border selection will appear at the bottom.
  • The most recently selected color is already preselected.
  • Click to start drawing the shape and release the mouse button once you're done.
Drawing an simple shape with our HTML Canvas Editor
  • To change the border of a shape, click on None to open the border selection menu.
  • Select one of the border styles shown in the menu.
Modify the border of a drawn shape.
  • To change the color of the border, click on the colored (or transparent) area next to Border to open the color picker.
  • Select a color.
Modify the border of a drawn shape.
  • Your shape now has a colored border.
Modify the border color of a drawn shape.
  • To change the color of the shape, click on the colored (or transparent) area next to Fill to open the color picker.
Change the color of an existing shape.
  • Select a new color for your shape.
Changed the color of an existing shape.