Introduction

What is iDraw.js

iDraw.js is a JavaScript framework for drawing on web. It is based on the Canvas API in the browser.

It can be data-driven to render Image on Canvas in the browser. Furthermore, it can also visually handle the position, shape and layout of Drawing-Element.

iDraw.js is open source based on MIT License and it's code is stored in GitHub and NPM So that you can use iDraw.js for free in your own projects.

Getting started

npm install idraw

import { iDraw } from 'idraw';
const data = {
  elements: [
    {
      name: 'rect-001',
      x: 160,
      y: 80,
      w: 200,
      h: 200,
      type: 'text',
      detail: {
        text: 'Hello World',
        color: '#3f51b5',
        fontSize: 60,
        textAlign: 'center',
        borderRadius: 10,
        borderWidth: 2,
        borderColor: '#3f51b5'
      }
    }
  ]
};

const app = document.querySelector('#app');
const idraw = new iDraw(app, {
  width: 600,
  height: 400,
  devicePixelRatio: 2
});
idraw.setData(data);