Draw

A basic 2d canvas graph library

Draw.js is a basic 2d canvas graph library, which is under development currently.

Get started

CDN

Add following script into your HTML header

<script src="https://drawjs.github.io/CDN/draw/draw.js"></script>

Add a canvas in html, like:

<canvas id="myCanvas"></canvas>

Then you can just use it in script

const canvas = document.getElementById( 'myCanvas' )
const draw = new window.Draw( canvas )

Node.js

It also supports Node.js

npm install ts-draw --save-dev

Next import it with

require( 'ts-draw' )

or

import 'ts-draw'

Features

Creating an Element

Shapes

Line
Polyline

Rect

Circle

Polygon, Rounded Polygon

Configure curve rate:

Image

Text

Dragging, Rotating and Sizing Element

Transforming Element with Segments and Handles

Selecting Element

Drag a selection area to select elements

Zooming and Panning Viewport

Zoom: Scroll mouse to zoom in or zoom out
Pan: Press Space or click mouse’s center key to pan viewport

MiniMap

Exporting and Importing data

Example

Data-Sandboxie

An interactive graph for multi-level data combination, being used in company’s commercial product. Here is a demo.

Future

Draw.js is still under development now. It will support more elements and more awesome features in the future. Let’s look forward to it. And if you had any questions or advices, you could submit it in issues.