preface

Unconsciously, there is a year did not release the public number article, this period of time just free, took the time to write this article. This article mainly explains my naked resignation for 3 months, using the rest of the gap time at home, developed a front-end drawing JavaScript library iDraw. Js.

Why are we developing this thing

  • In order to realize the drawing function with pure Canvas ability combining pictures, HTML and SVG as materials.
  • To see what kind of multi-material drawing implementations can be made using Canvas’s 2D (2D) API alone.
  • Finally, I want to try out how complex drawing material manipulation can be done with Canvas.
  • As far as I know, I haven’t found a similar Canvas open source framework that can control material drawing (thank you for your advice, and the Fabric.js framework has similar ability), so I want to develop one myself.

IDraw. Introduction of js

  • A 2D API based on pure Canvas to achieve the ability to draw and manipulate material JavaScript library.

  • You can expand and customize various visual manipulation applications based on idraw.js. Visit idraw.js.org/playground/ for display examples, or visit idraw.js.org/studio/ for drawing examples based on idraw.js.

What functions does idraw.js have

Supports drawing text, rectangles, circles, images, HTML fragments, and SVG fragment drawing elements

Rendering text

Draw a rectangle

Draw a circular

Draw pictures

Drawing HTML fragments

Drawing an SVG fragment

All the above functions are visualized based on Canvas 2D API.

What are the features of idraw.js

  • You can draw text, rectangles, circles, images, HTML fragments, and SVG files as drawing elements.

  • You can manipulate the above drawing elements directly from the Canvas without worrying about CSS and DOM changes.

  • Canvas controls drawing, and wySIWYG can directly export the result of drawing pictures. Because visual manipulation and image generation are based on Canvas, browser compatibility issues with drawing are minimized.

  • You can copy, cut, and paste elements using shortcuts.

The principle is introduced

  • Based on data driven to draw Canvas drawing, all drawing elements are described in JSON data format.

  • RequestAnimationFrame is used to control data changes and redraw the Canvas to keep the operation smooth and reduce lag when manipulating drawing elements.

  • There is a built-in front-end concurrent queue to handle graphic conversion rendering of images, HTML, and SVG.

How to use

Install the NPM module

npm install idraw
Copy the code

Apply colours to a drawing painting

import iDraw from 'idraw';

const app = document.querySelector('#app');
const options = {
  width: 600,
  height: 400,
  contextWidth: 600,
  contextHeight: 400,
  devicePixelRatio: 2,
};
const idraw = new iDraw(app, options);
idraw.addElement({
  name: "rect-001",
  x: 140,
  y: 120,
  w: 200,
  h: 100,
  type: "rect",
  desc: {
    bgColor: "#f7d3c1",
    borderRadius: 20,
    borderWidth: 4,
    borderColor: "#ff6032",
  },
});
Copy the code

See the documentation or the Playground demo for more

Actual use cases

A UI visualization drawing based on iDraw. Js implementation, @idraw/studio implementation.

Summary result

  • Canvas 2D Context API is really useful, you can draw freely. At the same time, different data formats can be converted into DataURL through JS. For example, code fragments such as HTML and SVG can be directly rendered in Canvas after being converted.

  • However, if the CSS content of the HTML rendering is more complex, there will be obvious frame drops and lag when manipulating the element movement and change, even though I used requestAnimationFrame to control the frame rate of the rendering. If performance optimization in complex situations is needed, the rendering mode of WebGL should be added in the subsequent plan, and the rendering result of manipulating the change of drawing material ratio should be optimized by using GPU capability.

The follow-up plan

I found that in the case of large image size and the conversion of resource formats involving images, HTML and SVG, there would be obvious frame drop and lag in the operation of element movement and other behaviors. In the future, I planned to use the underlying Canvas 2D API for rendering and rewrite a set of WebGL based implementation. So that users can consider whether to choose WebGL to accelerate rendering according to their own scene requirements.

Idraw.js information link

  • GitHub address: github.com/idrawjs/idr…
  • Official website: idraw.js.org/
  • Example Playground API: idraw.js.org/playground/
  • Example of Studio based on idraw.js: idraw.js.org/studio/