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
sh
npm install idraw
js
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);