DEV Community

Cover image for iDraw.js, a simple web drawing JavaScript library based on Canvas
chenshenhai
chenshenhai

Posted on • Updated on

iDraw.js, a simple web drawing JavaScript library based on Canvas

Introduction

Image description

This is an open source JavaScript library, using TypeScript to develop a Web drawing framework based on Canvas.

  • Website: https://idrawjs.com/
  • GitHub: https://github.com/idrawjs/idraw
  • A JavaScript library for drawing and manipulating materials based on pure Canvas.
  • You can expand and customize various visual manipulation applications based on iDraw.js, here you can refer to the case https://idrawjs.com/studio/
  • It can draw text, rectangles, circles, pictures, HTML fragments and SVG files, and all of them can be used as drawing elements to generate data in specified formats.

More information

Why I develop iDraw.js

  • In order to use pure Canvas features to combine pictures, HTML and SVG as materials to do drawing work.
  • In order to try to see what kind of multi-material drawing work can be done with the 2D API of Canvas alone.
  • The last is to try to use Canvas as much as possible to manipulate the material.

iDraw.js's Features

Draw Text

Image description

Draw Rectangle

Image description

Draw Circle

Image description

Draw Image

Image description

Draw SVG Code

Image description

Draw HTML Code

Image description

Next Plan

  • Continue to optimize performance
  • Extend more drawing element types

Top comments (0)