js: Use canvas to make a picture annotation function

Selection of canvas-related libraries

name	star（2021.3）	Documentation	Remarks
fabricjs	18.2k	http://fabricjs.com/	--------
konva	6k	https://konvajs.org/	----------
react-konva	3.8k	Same as above	---------
vue-konva	682	Same as above	----------
react-canvas	2.8k	-	No maintenance in 2007, react16 is not supported, use with caution

Draw complex canvas graphics. It allows us to operate the canvas like the DOM, and provides an event mechanism for the elements in the canvas, and support for drag-and-drop operations.

fabricjs example

For example, we normally use canvas to draw a small square like this.

// reference canvas element (with id="c")
var canvasEl = document.getElementById('c');

// get 2d context to draw on (the "bitmap" mentioned earlier)
var ctx = canvasEl.getContext('2d');

// set fill color of context
ctx.fillStyle = 'red';

// create rectangle at a 100,100 point, with 20x20 dimensions
ctx.fillRect(100, 100, 20, 20);

Using Fabric is like this

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
    
    
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);

Is it much more convenient

react-konva example