DrawgonJS

Customizable canvas drawing library.

Usage

Add scripts right before closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/paper-full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/drawgon.min.js"></script>

You need to have a canvas with a specific id and these attributes in your page:

<canvas id="drawgon" resize="true" data-paper-scope="1"></canvas>

Initialize DrawgonJS:

var draw = new Drawgon("drawgon");

// Or you can change the default configurations:
var draw = new Drawgon("drawgon", {
    backgroundColor: "#ffffff",
    mode: "draw",
    tools: ['brush', 'eraser'],
    strokeColor: "#000000",
    strokeCap: "round",
    strokeWidth: 6,
    minStrokeWidth: 1,
    maxStrokeWidth: 9999,
    baseFontSize: 15,
    pathSmoothing: 10,
    cornerSmoothing: 4,
    center: [0, 0],
    zoom: 1,
    maxZoom: 16,
    minZoom: 0.4,
});

Choose tools:

// Adding a tool
draw.tools.push(DrawgonTool.get('hand'));

// Or choosing all available tools:
draw.tools = DrawgonTool.getAll();

Now the canvas is ready to use.

• More instructions and details will be added in a few days...