Features of our HTML Canvas Editor

Freehand Drawing

The canvas is yours!
Draw anything in any color
and freely express yourself.

Build Diagrams

Use predefined shapes like rectangles, circles,
or triangles to build charts and diagrams.

Use Lines and Arrows

Make use of lines and arrows to group and
connect various parts of your drawing.

Insert Text

Say what you need to say and add
as much text to your drawing as you like.
Define size, font, color and border.

Create Custom Shapes

If you want to create your own shapes,
our polygon drawing tool has got you covered.

Edit or Erase Anything

Nothing is forever, not even in your drawing.
Edit or erase anything, whenever you want.

Set Color, Opacity and Border

Have a great control of the
illustration of your shapes.

Image as Background

Have an image as your background.
You can even crop it while inserting.

Transparent Background

Set your background transparent to
draw on your website.

Float your Drawer

Move the canvas on your website.
Or align it in your HTML.

Place your Toolbars

Use the toolbars connected to the canvas
(inside or outside) or place them wherever you want.

Configure Default Plugin

Define any plugin to be automatically
selected when starting your drawing.

Insert Image

Insert any image and treat it as you want
to enrich your drawings. You can even crop it while inserting.

Public API

Control your DrawerJs using JavaScript.
Need a specific function as a public method?
Ask us!

Format your Text

Use multiline support, font weight,
text alignment, text background, and text decoration to prettify your text.

Works in All Browsers

We've worked hard to provide
a great user experience
across all modern browers.

Ready for Touch

DrawerJs is fully touch-enabled and works
great on tablets and smartphones as well.

Entirely Customizable

Make it yours and tailor colors, fonts,
and appearance to your needs, just as you like.

Zooming and Moving

Zoom into your canvas to
get a detailed view and move the canvas around.

Fullscreen Mode

Set your canvas to fullscreen mode
or collapse it entirely.

Screenshot

Want to use a screenshot of your browser's window as an image or background?
Our upcoming feature will be incredible!

(Coming in Summer 2017)

Save the Canvas

Save the drawn canvas in hidden areas of
your page or pass it to your own function.

Export an Image

Automatically create an image from the
contents of the canvas when saving your drawing.

Standalone or Redactor plugin

DrawerJs can be used as an independent
widget or as a plugin for Imperavi's Redactor.

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