In Web development, Canvas is a powerful drawing technology that can achieve various interesting interactive effects and dynamic graphics. This article will take stock of 10 open source projects based on Canvas, aiming to provide development inspiration and ideas for everyone to better explore and apply Canvas technology!

canvas-editor

canvas-editor is a rich text editor based on canvas/svg, similar to word. It has the following characteristics:

• What you see is what you get : Word can be paginated, what you see is what you get
• Lightweight data structure : a piece of JSON can present complex styles
• Rich functions : supports common rich text operations, tables, watermarks, controls, formulas, etc.
• Easy to use : The core npm package is officially released, and the menu bar and toolbar can be maintained by themselves.
• Flexible development mechanism : life cycle, event callbacks, customized right-click menus, shortcut keys, etc. can be obtained through the interface
• Fully Typed API : Flexible API and full TypeScript types

Github: https://github.com/Hufe921/canvas-editor

lucky-canvas

lucky-canvas is a set of [Big Roulette/Jiugongge/Slot Machine] lottery plug-ins developed based on TS + Canvas. A set of source code adapts to the multi-terminal framework JS / Vue / React / Taro / UniApp / WeChat applet, etc. Prizes / text / pictures / Color / buttons can be configured, support synchronous / asynchronous lottery, probability front / back end controllable, automatically adjust the definition according to DPR to adapt to the mobile terminal.

Github: https://github.com/buuing/lucky-canvas

Excalidraw

Excalidraw is an open source online whiteboard tool mainly used to create simple and intuitive graphics and sketches, supporting sharing and collaboration. Following are the key features of Excalidraw: