study canvas

[pistis]

References

• https://github.com/raphamorim/awesome-canvas

Requirement

• github update
• Drawing shapes
• Line drawing
• Paint area
• Eraser
• Select objects
• Objects drag and drop
• Adjusting object z-index
• Text drawing
• Comfortable API Interface
• Undo & Redo
• customizing ui(toolbar and canvas, selection)

Library to review

• [x] bHive : overspec
• [x] bitmapdata : not working
• [x] paper.js : not suitable
• [x] HTML Canvas Library : not suitable
• [ ] star 11034 fabricjs : will make lightweight version
• [x] star 9911 Raphael : will make lightweight version, old update
• [x] d3 : not suitable
• [x] Rough.js : No convenient functions such as drag and drop, selection.
• [x] matter-js : not suitable
• [x] easeljs : not suitable
• [x] two.js : Suitable for animation.
• [x] drawingboard : simple draw line and fill, will check more
• [ ] origami.js : will check more(maybe not suitable)
• [ ] particles.js : will check more(maybe not suitable)
• [x] ocanvas : will check more(Object-based canvas drawing)
• [ ] guide : will check
• [x] pixijs : will check more! overspec
• [x] Gojs : not suitable, not free
• [x] Joint.js : not free

Article to review

• [ ] HTML Canvas Tutorial
• [x] resizing and cropping
• [ ] Zooming and anti-aliasing
• [ ] get mouse potision in canvas
• [x] Canvas loader(progressbar)

[pistis]

ocanvas : studying

[pistis]

• drawingboard : studying

[pistis]

• fabricjs : studying

[pistis]

konva

[pistis]

interactjs : unsuitable

[pistis]

mxgraph : unsuitable

[pistis]

draw2d : unsuitable

[pistis]

https://github.com/bpmn-io/diagram-js https://github.com/steelbreeze/state.js https://github.com/almende/vis https://p5js.org/ https://d3js.org/

[pistis]

origamijs : unsuitable

[pistis]

https://mattketmo.github.io/darkroomjs/ : unsuitable

[pistis]

https://github.com/konvajs/konva

[pistis]

https://www.drawerjs.com/samples