1. Background
The operation of the native canvas is mainly based on the context, requiring the user to implement some basic functions from scratch, which is relatively complicated. The canvas library file encapsulates many convenient objects, allowing users to draw at a more advanced level.
Second, the official website
Fabric.js official website: Fabric.js Javascript Canvas Library
Konva.js official website: Konva Chinese Documentation Chinese API
Three, the difference
1、Fabric.js
advantage:
- It is a relatively old brand, and the commonly used transformations (zoom in, zoom out, drag and drop) have been packaged, especially suitable for writing interactive interfaces with Canvas
- Rich built-in brushes, basic alignment and marking are available
- The code integration is relatively high, with built-in interactive rich text (pure Canvas implementation)
shortcoming:
- The code is developed using ES 5, which cannot support TypeScript very well, and the development efficiency may be affected
- Because the library itself integrates many function points, the size of the code package is too large (308 kB after compression)
- The detailed functions still need to be improved, such as the relatively simple implementation of the marking system
2、Conva.js
advantage:
- Support desktop/mobile events
- Custom styles and events for control points can be easily implemented
- Written in TypeScript, natively supported by TS
- The rendering layering is relatively clear, Stage -> Layer -> Group -> Shape
- The code is concise, clean and easy to read
- The core code is refined and the code package is small (155 kB after compression)
shortcoming:
- Some functions are realized based on DOM (rich text)
- A rising star, the surrounding ecology is still relatively weak