[Javascript] Javascript HTML5 Canvas Libraries

[Javascript] Javascript HTML5 Canvas Libraries

• HTML5 canvas를 쉽게 다룰 수 있게 해주는 다양한 라이브러리들.

1. fabric.js : http://fabricjs.com/

   • TMI

     • NHN Toast ui 의 Image editor도 이 라이브러리를 쓴다. (https://ui.toast.com/tui-image-editor)

   • 장점

     • 다양한 예제(Demo)가 있다.
     • 사용하는 사람, 이걸 사용해서 개발된 프로젝트가 많다.

   • 단점

     • Free Drawing(Pen)으로 그린 그림을 지우는 방법이 딱히 없다.

       • issue에 방법이 하나 있긴 함 => https://github.com/fabricjs/fabric.js/issues/1225
       • 하지만 위 방법을 사용하면 배경이 지워지지 않는 대신, undo/redo 기능 구현이 불편하다. (객체가 움직인다.)

     • 그린 그림(객체)들의 위치가 움직이는 오류가 있다.

       • NHN TOAST UI에도 같은 오류가 있다. => https://github.com/nhn/tui.image-editor/issues/228

2. konva.js : https://konvajs.org/
   • 장점
     • vanilla js, react, vue Documents 제공한다.
     • 다양한 Demo가 있다.
     • 지우개 기능 관련 Demo가 존재한다.
   • 단점
     • fabric 보다 정보가 많이 없는 듯 하다.
     • 사용을 안해봐서 모르겠다. 써봐야 겠다.

3. paper.js : http://paperjs.org/