iDraw.js (published on npm as idraw) is a simple TypeScript framework for drawing 2D graphics on the web, written for developers who want to add canvas-based drawing to a browser application without starting from raw drawing primitives.

What it is

iDraw.js is an MIT-licensed open source JavaScript framework, written in TypeScript, that lets you create a drawing surface on any DOM element and populate it with shaped materials. A typical session is three steps: construct an instance with new iDraw(document.querySelector('#app'), { width: 600, height: 400, devicePixelRatio: 1 }), then call idraw.addMaterial(...) to place objects such as a type: "rect" with x, y, width, height, fill, stroke, strokeWidth and cornerRadius properties. The project is documented at idrawjs.com in both English and Chinese, with a live playground and a hosted studio for trying the API in the browser.

The problem it addresses is the amount of low-level work involved in producing interactive 2D drawing output in a web page. Rather than driving the HTML5 Canvas API element by element, a developer supplies declarative material objects and configuration such as device pixel ratio and canvas dimensions, and the framework handles rendering. Its repository topics — 2d, canvas, graphics, design, draw — place it squarely in the browser drawing and design-tooling space, and its README is oriented at quick integration rather than at a full hosted product.

Key capabilities

• Instantiate a drawing canvas on any container element with new iDraw(el, { width, height, devicePixelRatio }), setting the rendering resolution per device.
• Add scene objects through idraw.addMaterial({ name, type: "rect", x, y, width, height, fill, strokeWidth, stroke, cornerRadius }), with named elements such as "rect-1" or "rect-001".
• Use the same iDraw import inside React, with useRef and useEffect binding the instance to a mounted element.
• Use the same iDraw import inside Vue, with ref and onMounted to attach to a template mount node.
• Try the API without a local setup through the hosted Online Playground and the Online Studio at idrawjs.com.
• Follow bilingual documentation at https://idrawjs.com/docs/en-US/ and https://idrawjs.com/docs/zh-CN/.
• Work with @idraw/studio, developed in its own repository at github.com/idrawjs/studio, alongside the core idraw package.

Who uses it and how

• Frontend developers embedding a drawing surface into an existing React application, where the instance is created inside useEffect against a useRef element.
• Vue developers adding drawing to a component by creating the instance in onMounted against a template ref.
• Design and prototyping teams evaluating the framework through the hosted Online Studio and Online Playground before committing to it in code.
• Contributors cloning [email protected]:idrawjs/idraw.git, installing with pnpm i, and running npm run dev to work on the source.

Getting started

Install the package with npm i idraw, then import it with import { iDraw } from 'idraw' and construct an instance over a DOM element. To work on the framework itself, clone the repository, run pnpm i, and start the development build with npm run dev.

How it compares

The repository's topics place it alongside Fabric.js (fabricjs) and Figma-style design tooling (figma), which is where it positions itself in the web drawing landscape. It differs from those by being a small MIT-licensed framework you install and embed directly, rather than a hosted editor service, with its studio offered as an optional separate package.

When to use it — and when not

Choose it when you need a lightweight, embeddable 2D drawing layer inside a browser app and are comfortable wiring up your own interface around it; there is no server, database, storage or SMTP component to operate because everything runs client-side. It is a poorer fit if you want a complete editor product out of the box or need capabilities the README does not describe, and the published README excerpt is short — showing only rectangle examples and framework wiring — so the breadth of supported material types and drawing operations should be confirmed against the full documentation before committing.

npm i idraw

import { iDraw } from 'idraw';

const idraw = new iDraw(
  document.querySelector('#app'),
  {
    width: 600,
    height: 400,
    devicePixelRatio: 1,
  }
);
idraw.addMaterial({
  name: "rect-1",
  type: "rect",
  x: 140,
  y: 120,
  width: 200,
  height: 100,
  fill: "#f7d3c1",
  strokeWidth: 4,
  stroke: "#ff6032",
  cornerRadius: 20,
});

import { iDraw } from 'idraw';
import { useEffect, useRef } from 'react';

function Demo() {
  const ref = useRef(null);
  useEffect(() => {
    const idraw = new iDraw(ref.current, {
      width: 600,
      height: 400, 
      devicePixelRatio: 1,
    });
    idraw.addMaterial({
      name: "rect-001",
      x: 140,
      y: 120,
      width: 200,
      height: 100,
      fill: "#f7d3c1",
      strokeWidth: 4,
      stroke: "#ff6032",
      cornerRadius: 20,
    })
  }, []);

  return (
    <div ref={ref}></div>
  )
}

<template>
  <div ref="mount"></div>
</template>

<script setup >
import { iDraw } from 'idraw';
import { ref, onMounted } from 'vue'
const mount = ref();

onMounted(() => {
  const idraw = new iDraw(mount.value, {
    width: 600,
    height: 400, 
    devicePixelRatio: 1,
  });
  idraw.addMaterial({
    name: "rect-001",
    x: 140,
    y: 120,
    width: 200,
    height: 100,
    fill: "#f7d3c1",
    strokeWidth: 4,
    stroke: "#ff6032",
    cornerRadius: 20,
  })
})
</script>