Skip to content
A customizable WYSIWYG HTML canvas editor.
JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Update libs of examples to Bootsrap v4.3.1 and jquery-3.4.1 Oct 4, 2019
dist updated dist, updated package.json Nov 11, 2018
examples
fonts removes fonts from gitignore and adds all assets and fonts folder Nov 29, 2017
lib Update libs of examples to Bootsrap v4.3.1 and jquery-3.4.1 Oct 4, 2019
src removed debugging output Oct 15, 2019
.gitignore Task runner updates Dec 27, 2017
ARCHITECTURE-DIRECTORIES.md
ARCHITECTURE.md updates docs Nov 25, 2017
Gruntfile.js
LICENSE Initial commit Nov 25, 2017
README.md Updated docs link in master README.md Dec 14, 2017
bower.json fix: npm packages (#24) Apr 15, 2018
package-lock.json
package.json Changed postinstall script to prepare stage --> same can be used for … Oct 15, 2019
version.txt initial commit of sourcecode Nov 25, 2017

README.md

DrawerJS

DrawerJS is a HTML5 widget that allows drawing and writing on HTML5 canvas elements. Mobile devices are fully supported.

It is a customizable WYSIWYG HTML canvas editor for freehand drawing and creating sketches with simple shapes.

What is DrawerJs? How can I use it?

Here you will find more informations about features and a short faq: DrawerJs

And here you'll find some examples and you can test it live: DrawerJs on GitHub

Here you will find a detailed documentation about the usage and its configuration: DrawerJs-Docs

Release Notes

Here are the release notes of the deployment since 2015: DrawerJs-Release Notes

Contribute?

If you want to contribute or just help with PR, please contact me!

Do you know our other JavaScript library?

Check out our imager uploader ImagerJs!

Documentation:

Distribution versions

Configuration options

Development environment setup

Source code files and build system overview

Source code architecture overview

Plugin versions

This plugin distributes in two versions:

Redactor editor plugin

Could be embedded to page as follows:

<link rel="stylesheet" href="dist/drawerJs.css"/>

<script src="dist/drawerJs.redactor.js"></script>

<!-- or minified version: -->

<script src="dist/drawerJs.redactor.min.js"></script>

For information about how to build everything to the dist folder please see Development how-to

Then drawer name could be provided to redactor's config into the plugins section:

$('.redactor').redactor({
    buttons: [
        'bold',
        'html',
        'image'
    ],
    plugins: [
        'video',
        'drawer', // << here we specify that redactor should load this plugin
        'opensave',
        'contexttoolbar'
    ],
    drawer: {
        // drawer config section here
        activeColor: '#19A6FD' // default drawing color
    }
});

For working example please see demo folder.

For more information about drawer config section please see Configuration

Standalone version

Could be embedded to page as follows:

<link rel="stylesheet" href="dist/drawerJs.css"/>

<script src="dist/drawerJs.standalone.js"></script>

<!-- or minified version: -->

<script src="dist/drawerJs.standalone.min.js"></script>

For information about how to build everything to the dist folder please see Development how-to

Then drawer could be appended to any html container like this:

var canvas = new DrawerJs.Drawer(null, {
    // drawer config section here
    activeColor: '#19A6FD' // default drawing color
}, 600, 600); // height and width of drawer will be 600x600

$('#some_id').append(canvas.getHtml());
canvas.onInsert();

Where #some_id is any DOM element id.

For working example please see examples/standalone folder.

For more information about drawer config section please see Configuration

Configuration

When you finish with setting up development environment you will have dist folder with everything built up. Look there for docs folder, find index.html and open it.

Then the link below will work.

Please look at CanvasElement documentation for options description.

Development how-to:

Requirements: node.js, npm, git

npm install to install all npm/bower dependencies.

npm start to compile everything to dist folder.

This will also watch for changes in src directory and recompile everything.

You can’t perform that action at this time.