Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

awesome-canvas


https://github.com/ygs-code/awesome-canvas

  • Draw on the Web
  • The Aesthetics of Graph Visualization
  • Computer Graphics And Visualization
  • Mozilla Developer Network Canvas Tutorial
  • Internet Explorer 9 Guide for Developers: HTML5 canvas element
  • The canvas element in the HTML5 draft standard
  • HTML5 Canvas — the Basics
  • HTML5 Canvas - RUNOOB Tutorial
  • HTML5 Canvas - W3school Tutorial
  • HTML5 Canvas - 廖雪峰 Tutorial
  • HTML5 Canvas - IMOOC Tutorial
  • The Chinese series of learning tutorials of HTML5 canvas
  • AntV Graphin - Graph Database White Paper
  • AntV Graphin - Knowledge Graph White Paper
  • AntV Graphin - Network Security White Paper
  • AntV Graphin - Enterprise Risk Control White Paper
  • HTML5 Canvas开发详解
  • TypeScript图形渲染实战:2D架构设计与实现
  • HTML5 Canvas核心技术:图形、动画与游戏开发
  • HTML5 2D游戏编程核心技术
  • HTML5 Canvas游戏开发实战
  • 从0到1 HTML5 Canvas动画开发
  • HTML5 Canvas核心技术: 图形、动画与游戏开发
  • D3 for impatient: interactive Graphics for Programmers and Scientists
  • 如何使用 Canvas 制作出炫酷的网页背景特效
  • 可视化入门:从 0 到 1 开发一个图表库
  • Graph Analysis and Visualization
  • Visual Complexity: Mapping Patterns of Information
  • Data visualization
  • 从0-1入门数据可视化
  • fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser. ![](https://img.shields.io/github/stars/fabricjs/fabric.js?style=social) ![](https://img.shields.io/github/forks/fabricjs/fabric.js?style=social)
  • DarkroomJS - Extensible image editing tool in your browser. ![](https://img.shields.io/github/stars/MattKetmo/darkroomjs?style=social) ![](https://img.shields.io/github/forks/MattKetmo/darkroomjs?style=social)
  • react-design-editor - design-editor/)] - React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs. ![](https://img.shields.io/github/stars/salgum1114/react-design-editor?style=social) ![](https://img.shields.io/github/forks/salgum1114/react-design-editor?style=social)
  • react-sketch - sketch/)] - Sketch Tool for React-based applications, backed up by FabricJS. ![](https://img.shields.io/github/stars/tbolis/react-sketch?style=social) ![](https://img.shields.io/github/forks/tbolis/react-sketch?style=social)
  • vue-fabric - Vue fabric component created based on canvas fabric.js library, customized drawing board, picture combination drawing. ![](https://img.shields.io/github/stars/purestart/vue-fabric?style=social) ![](https://img.shields.io/github/forks/purestart/vue-fabric?style=social)
  • angular-fabric - Control a FabricJS canvas with AngularJS. ![](https://img.shields.io/github/stars/michaeljcalkins/angular-fabric?style=social) ![](https://img.shields.io/github/forks/michaeljcalkins/angular-fabric?style=social)
  • fabric-js-editor - An HTML5 vector image editor built with Fabric.js. ![](https://img.shields.io/github/stars/danielktaylor/fabric-js-editor?style=social) ![](https://img.shields.io/github/forks/danielktaylor/fabric-js-editor?style=social)
  • fabric-brush - brush/)] - Crayon is a canvas brush based on an awesome framework Fabric.js. ![](https://img.shields.io/github/stars/tennisonchan/fabric-brush?style=social) ![](https://img.shields.io/github/forks/tennisonchan/fabric-brush?style=social)
  • fabricjs-image-editor-origin - image-editor-f62330.netlify.app/)] - fabric.js javascript image editor. ![](https://img.shields.io/github/stars/pegasus1982/fabricjs-image-editor-origin?style=social) ![](https://img.shields.io/github/forks/pegasus1982/fabricjs-image-editor-origin?style=social)
  • DrawerJs - A customizable WYSIWYG HTML canvas editor. ![](https://img.shields.io/github/stars/carstenschaefer/DrawerJs?style=social) ![](https://img.shields.io/github/forks/carstenschaefer/DrawerJs?style=social)
  • myvision - Computer vision based ML training data generation tool 🚀. ![](https://img.shields.io/github/stars/OvidijusParsiunas/myvision?style=social) ![](https://img.shields.io/github/forks/OvidijusParsiunas/myvision?style=social)
  • konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. ![](https://img.shields.io/github/stars/konvajs/konva?style=social) ![](https://img.shields.io/github/forks/konvajs/konva?style=social)
  • konva Chinese Docs
  • react-konva - React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React. ![](https://img.shields.io/github/stars/konvajs/react-konva?style=social) ![](https://img.shields.io/github/forks/konvajs/react-konva?style=social)
  • vue-konva - Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue. ![](https://img.shields.io/github/stars/konvajs/vue-konva?style=social) ![](https://img.shields.io/github/forks/konvajs/vue-konva?style=social)
  • react-proto - 🎨 React application prototyping tool for developers and designers 🏗️. ![](https://img.shields.io/github/stars/React-Proto/react-proto?style=social) ![](https://img.shields.io/github/forks/React-Proto/react-proto?style=social)
  • two.js - A renderer agnostic two-dimensional drawing api for the web. ![](https://img.shields.io/github/stars/jonobr1/two.js?style=social) ![](https://img.shields.io/github/forks/jonobr1/two.js?style=social)
  • EaselJS - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier. ![](https://img.shields.io/github/stars/CreateJS/EaselJS?style=social) ![](https://img.shields.io/github/forks/CreateJS/EaselJS?style=social)
  • spritejs - A cross platform high-performance graphics system. ![](https://img.shields.io/github/stars/spritejs/spritejs?style=social) ![](https://img.shields.io/github/forks/spritejs/spritejs?style=social)
  • concretejs - A lightweight Html5 Canvas framework that enables hit detection, layer support, pixel ratio management, exports, and downloads. ![](https://img.shields.io/github/stars/ericdrowell/concrete?style=social)
  • cax - HTML5 Canvas 2D Rendering Engine. ![](https://img.shields.io/github/stars/dntzhang/cax?style=social) ![](https://img.shields.io/github/forks/dntzhang/cax?style=social)
  • wxDraw - A lightweight canvas library which providing 2d draw for weapp. ![](https://img.shields.io/github/stars/bobiscool/wxDraw?style=social) ![](https://img.shields.io/github/forks/bobiscool/wxDraw?style=social)
  • atrament.js - A small JS library for beautiful drawing and handwriting on the HTML Canvas. ![](https://img.shields.io/github/stars/jakubfiala/atrament.js?style=social) ![](https://img.shields.io/github/forks/jakubfiala/atrament.js?style=social)
  • origami.js - Powerful and Lightweight Library to create using HTML5 Canvas. ![](https://img.shields.io/github/stars/raphamorim/origami.js?style=social) ![](https://img.shields.io/github/forks/raphamorim/origami.js?style=social)
  • react-native-sketch-canvas - A React Native component for drawing by touching on both iOS and Android. ![](https://img.shields.io/github/stars/terrylinla/react-native-sketch-canvas?style=social) ![](https://img.shields.io/github/forks/terrylinla/react-native-sketch-canvas?style=social)
  • mesh.js - A graphics system born for visualization. ![](https://img.shields.io/github/stars/mesh-js/mesh.js?style=social) ![](https://img.shields.io/github/forks/mesh-js/mesh.js?style=social)
  • taro-plugin-canvas - Canvas component for wechat miniapp based on taro, Generate shared pictures through configuration. ![](https://img.shields.io/github/stars/chuyun/taro-plugin-canvas?style=social) ![](https://img.shields.io/github/forks/chuyun/taro-plugin-canvas?style=social)
  • three.js - JavaScript 3D Library. ![](https://img.shields.io/github/stars/mrdoob/three.js?style=social) ![](https://img.shields.io/github/forks/mrdoob/three.js?style=social)
  • zdog - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG ![](https://img.shields.io/github/stars/metafizzy/zdog?style=social) ![](https://img.shields.io/github/forks/metafizzy/zdog?style=social)
  • curtainsjs - started.html#basic-setup)] - curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes. ![](https://img.shields.io/github/stars/martinlaxenaire/curtainsjs?style=social) ![](https://img.shields.io/github/forks/martinlaxenaire/curtainsjs?style=social)
  • obelisk.js - Build pixel isometric graphics with HTML5 canvas ![](https://img.shields.io/github/stars/nosir/obelisk.js?style=social) ![](https://img.shields.io/github/forks/nosir/obelisk.js?style=social)
  • seen - simple-interactive.html)] - Render 3D scenes into SVG or HTML5 Canvas. ![](https://img.shields.io/github/stars/themadcreator/seen?style=social) ![](https://img.shields.io/github/forks/themadcreator/seen?style=social)
  • Oimo.js - th.github.io/Oimo.js/index.html#basic)] - Lightweight 3d physics engine for javascript. ![](https://img.shields.io/github/stars/lo-th/Oimo.js?style=social) ![](https://img.shields.io/github/forks/lo-th/Oimo.js?style=social)
  • troika - A JavaScript framework for interactive 3D and 2D visualizations. ![](https://img.shields.io/github/stars/protectwise/troika?style=social) ![](https://img.shields.io/github/forks/protectwise/troika?style=social)
  • phoria.js - JavaScript library for simple 3D graphics and visualisation on a HTML5 canvas 2D renderer. It does not use WebGL. Works on all HTML5 browsers, including desktop, iOS and Android. ![](https://img.shields.io/github/stars/kevinroast/phoria.js?style=social) ![](https://img.shields.io/github/forks/kevinroast/phoria.js?style=social)
  • isomer - Simple isometric graphics library for HTML5 canvas. ![](https://img.shields.io/github/stars/jdan/isomer?style=social) ![](https://img.shields.io/github/forks/jdan/isomer?style=social)
  • Panolens.js - Javascript panorama viewer based on Three.js ![](https://img.shields.io/github/stars/pchen66/panolens.js?style=social) ![](https://img.shields.io/github/forks/pchen66/panolens.js?style=social)
  • Pannellum - Pannellum is a lightweight, free, and open source panorama viewer for the web. ![](https://img.shields.io/github/stars/mpetroff/pannellum?style=social) ![](https://img.shields.io/github/forks/mpetroff/pannellum?style=social)
  • Marzipano - tour/)] A 360° media viewer for the modern web. ![](https://img.shields.io/github/stars/google/marzipano?style=social) ![](https://img.shields.io/github/forks/google/marzipano?style=social)
  • JS-Cloudimage-360-View - cloudimage-360-view/)] Engage your customers with a stunning 360 view of your products. ![](https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?style=social) ![](https://img.shields.io/github/forks/scaleflex/js-cloudimage-360-view?style=social)
  • A-Frame
  • exokit - Native VR/AR/XR engine for JavaScript 🦖 ![](https://img.shields.io/github/stars/exokitxr/exokit?style=social) ![](https://img.shields.io/github/forks/exokitxr/exokit?style=social)
  • webvr-boilerplate - boilerplate/#)] - A starting point for web-based VR experiences that work on all VR headsets. ![](https://img.shields.io/github/stars/borismus/webvr-boilerplate?style=social) ![](https://img.shields.io/github/forks/borismus/webvr-boilerplate?style=social)
  • matter-js - js/demo/#mixed)] - a 2D rigid body physics engine for the web ▲● ■ ![](https://img.shields.io/github/stars/liabru/matter-js?style=social) ![](https://img.shields.io/github/forks/liabru/matter-js?style=social)
  • box2d.js - Port of Box2D to JavaScript using Emscripten. ![](https://img.shields.io/github/stars/kripken/box2d.js?style=social) ![](https://img.shields.io/github/forks/kripken/box2d.js?style=social)
  • p2.js - JavaScript 2D physics library. ![](https://img.shields.io/github/stars/schteppe/p2.js?style=social) ![](https://img.shields.io/github/forks/schteppe/p2.js?style=social)
  • planck.js - 2D JavaScript Physics Engine. ![](https://img.shields.io/github/stars/shakiba/planck.js?style=social) ![](https://img.shields.io/github/forks/shakiba/planck.js?style=social)
  • Hilo - A Cross-end HTML5 Game development solution developed by Alibaba Group. ![](https://img.shields.io/github/stars/hiloteam/Hilo?style=social) ![](https://img.shields.io/github/forks/hiloteam/Hilo?style=social)
  • melonJS - a fresh & lightweight javascript game engine. ![](https://img.shields.io/github/stars/melonjs/melonJS?style=social) ![](https://img.shields.io/github/forks/melonjs/melonJS?style=social)
  • Babylon.js - Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. ![](https://img.shields.io/github/stars/BabylonJS/Babylon.js?style=social) ![](https://img.shields.io/github/forks/BabylonJS/Babylon.js?style=social)
  • taro - A lightweight 3D game engine for the web. ![](https://img.shields.io/github/stars/Cloud9c/taro?style=social) ![](https://img.shields.io/github/forks/Cloud9c/taro?style=social)
  • turbulenz_engine - Turbulenz is a modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices. ![](https://img.shields.io/github/stars/turbulenz/turbulenz_engine?style=social) ![](https://img.shields.io/github/forks/turbulenz/turbulenz_engine?style=social)
  • eva.js - Eva.js is a front-end game engine specifically for creating interactive game projects. ![](https://img.shields.io/github/stars/eva-engine/eva.js?style=social) ![](https://img.shields.io/github/forks/eva-engine/eva.js?style=social)
  • PlayCanvas - Fast and lightweight JavaScript game engine built on WebGL and glTF ![](https://img.shields.io/github/stars/playcanvas/engine?style=social) ![](https://img.shields.io/github/forks/playcanvas/engine?style=social)
  • Sketchbook - 3D playground built on three.js and cannon.js ![](https://img.shields.io/github/stars/swift502/Sketchbook?style=social) ![](https://img.shields.io/github/forks/swift502/Sketchbook?style=social)
  • Sein.js - Progressive web 3D game engine. ![](https://img.shields.io/github/stars/hiloteam/Sein.js?style=social) ![](https://img.shields.io/github/forks/hiloteam/Sein.js?style=social)
  • PuzzleScript - Open Source HTML5 Puzzle Game Engine ![](https://img.shields.io/github/stars/increpare/PuzzleScript?style=social) ![](https://img.shields.io/github/forks/increpare/PuzzleScript?style=social)
  • LittleJS - The Tiny JavaScript Game Engine That Can! 🚂 ![](https://img.shields.io/github/stars/KilledByAPixel/LittleJS?style=social) ![](https://img.shields.io/github/forks/KilledByAPixel/LittleJS?style=social)
  • Black - World's fastest HTML5 2D game engine 🛸 ![](https://img.shields.io/github/stars/MassiveHeights/Black?style=social) ![](https://img.shields.io/github/forks/MassiveHeights/Black?style=social)
  • stage.js - 2D HTML5 rendering and layout engine for game development. ![](https://img.shields.io/github/stars/shakiba/stage.js?style=social) ![](https://img.shields.io/github/forks/shakiba/stage.js?style=social)
  • pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. ![](https://img.shields.io/github/stars/pixijs/pixijs?style=social) ![](https://img.shields.io/github/forks/pixijs/pixijs?style=social)
  • Excalibur - 🎮 An easy to use 2D HTML5 game engine written in TypeScript. ![](https://img.shields.io/github/stars/excaliburjs/Excalibur?style=social) ![](https://img.shields.io/github/forks/excaliburjs/Excalibur?style=social)
  • Phaser - Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. ![](https://img.shields.io/github/stars/photonstorm/phaser?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser?style=social)
  • phaser-examples - Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework. ![](https://img.shields.io/github/stars/photonstorm/phaser-examples?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser-examples?style=social)
  • games - List of small games based on phaser ![](https://img.shields.io/github/stars/channingbreeze/games?style=social) ![](https://img.shields.io/github/forks/channingbreeze/games?style=social)
  • phaser3-examples - Phaser 3 Examples. ![](https://img.shields.io/github/stars/photonstorm/phaser3-examples?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser3-examples?style=social)
  • phaser-ce - Phaser CE is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. ![](https://img.shields.io/github/stars/photonstorm/phaser-ce?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser-ce?style=social)
  • phaser3-project-template - A Phaser 3 Project Template. ![](https://img.shields.io/github/stars/photonstorm/phaser3-project-template?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser3-project-template?style=social)
  • hex-engine - engine.dev/docs/examples)] - A modern 2D game engine for the browser. ![](https://img.shields.io/github/stars/suchipi/hex-engine?style=social) ![](https://img.shields.io/github/forks/suchipi/hex-engine?style=social)
  • GOJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages. ![](https://img.shields.io/github/stars/NorthwoodsSoftware/GoJS?style=social) ![](https://img.shields.io/github/forks/NorthwoodsSoftware/GoJS?style=social)
  • drawio - a configurable diagramming/whiteboarding visualization application. ![](https://img.shields.io/github/stars/jgraph/drawio?style=social) ![](https://img.shields.io/github/forks/jgraph/drawio?style=social)
  • Drawflow - Simple flow library 🖥️🖱️ ![](https://img.shields.io/github/stars/jerosoler/Drawflow?style=social) ![](https://img.shields.io/github/forks/jerosoler/Drawflow?style=social)
  • Flowy - The minimal javascript library to create flowcharts ✨ ![](https://img.shields.io/github/stars/alyssaxuu/flowy?style=social) ![](https://img.shields.io/github/forks/alyssaxuu/flowy?style=social)
  • flowchart.js - Draws simple SVG flow chart diagrams from textual representation of the diagram. ![](https://img.shields.io/github/stars/adrai/flowchart.js?style=social) ![](https://img.shields.io/github/forks/adrai/flowchart.js?style=social)
  • mermaid - live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ)] - Generation of diagram and flowchart from text in a similar manner as markdown. ![](https://img.shields.io/github/stars/mermaid-js/mermaid?style=social) ![](https://img.shields.io/github/forks/mermaid-js/mermaid?style=social)
  • wireflow - Wireflow - user flow chart real-time collaborative tool. ![](https://img.shields.io/github/stars/vanila-io/wireflow?style=social) ![](https://img.shields.io/github/forks/vanila-io/wireflow?style=social)
  • butterfly - dag.gitee.io/butterfly-dag/demo/analysis)] - 🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. ![](https://img.shields.io/github/stars/alibaba/butterfly?style=social) ![](https://img.shields.io/github/forks/alibaba/butterfly?style=social)
  • gantt - Open Source Javascript Gantt. ![](https://img.shields.io/github/stars/frappe/gantt?style=social) ![](https://img.shields.io/github/forks/frappe/gantt?style=social)
  • jQueryGantt - jQuery Gantt editor. ![](https://img.shields.io/github/stars/robicch/jQueryGantt?style=social) ![](https://img.shields.io/github/forks/robicch/jQueryGantt?style=social)
  • Gantt-Chart - Gantt chart library using D3.js. ![](https://img.shields.io/github/stars/dk8996/Gantt-Chart?style=social) ![](https://img.shields.io/github/forks/dk8996/Gantt-Chart?style=social)
  • dhtmlxGantt - GPL version of Javascript Gantt Chart. ![](https://img.shields.io/github/stars/DHTMLX/gantt?style=social) ![](https://img.shields.io/github/forks/DHTMLX/gantt?style=social)
  • gantt-for-react - for-react/)] - 🌿 Frappe Gantt components for React wrapper. ![](https://img.shields.io/github/stars/hustcc/gantt-for-react?style=social) ![](https://img.shields.io/github/forks/hustcc/gantt-for-react?style=social)
  • jquery.ganttView - An editable jQuery Gantt chart plugin. ![](https://img.shields.io/github/stars/thegrubbsian/jquery.ganttView?style=social) ![](https://img.shields.io/github/forks/thegrubbsian/jquery.ganttView?style=social)
  • wl-gantt - An easy-to-use gantt plug-in for the vue framework. ![](https://img.shields.io/github/stars/hql7/wl-gantt?style=social) ![](https://img.shields.io/github/forks/hql7/wl-gantt?style=social)
  • gantt-schedule-timeline-calendar - schedule-timeline-calendar.neuronet.io/examples)] - Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ] ![](https://img.shields.io/github/stars/neuronetio/gantt-schedule-timeline-calendar?style=social) ![](https://img.shields.io/github/forks/neuronetio/gantt-schedule-timeline-calendar?style=social)
  • OrgChart - It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart. ![](https://img.shields.io/github/stars/dabeng/OrgChart?style=social) ![](https://img.shields.io/github/forks/dabeng/OrgChart?style=social)
  • idraw - A simple JavaScript framework for Drawing on the web. ![](https://img.shields.io/github/stars/idrawjs/idraw?style=social) ![](https://img.shields.io/github/forks/idrawjs/idraw?style=social)
  • Workflow Designer - flowable workflow designer base on @antv/g6。 ![](https://img.shields.io/github/stars/guozhaolong/wfd?style=social) ![](https://img.shields.io/github/forks/guozhaolong/wfd?style=social)
  • vue-g6-editor - g6-editor/blob/master/1.gif)] - Visual graph editor based on vue ande g6. ![](https://img.shields.io/github/stars/caoyu48/vue-g6-editor?style=social) ![](https://img.shields.io/github/forks/caoyu48/vue-g6-editor?style=social)
  • X-Flowchart-Vue - Flowchart-Vue/)] - A visual graph editor based on G6 and Vue. ![](https://img.shields.io/github/stars/OXOYO/X-Flowchart-Vue?style=social) ![](https://img.shields.io/github/forks/OXOYO/X-Flowchart-Vue?style=social)
  • web-pdm - ER graph tools based on G6, the ultimate goal is to make an online version of powerdesigner. ![](https://img.shields.io/github/stars/lusess123/web-pdm?style=social) ![](https://img.shields.io/github/forks/lusess123/web-pdm?style=social)
  • ng-antv - Angular wrapper around the antv libraries. ![](https://img.shields.io/github/stars/dappsnation/ng-antv?style=social) ![](https://img.shields.io/github/forks/dappsnation/ng-antv?style=social)
  • welabx-g6 - g6/dist/?_blank)] - welabx - antv G6. ![](https://img.shields.io/github/stars/claudewowo/welabx-g6?style=social) ![](https://img.shields.io/github/forks/claudewowo/welabx-g6?style=social)
  • topology - A diagram (topology, UML) framework uses canvas and typescript. ![](https://img.shields.io/github/stars/le5le-com/topology?style=social) ![](https://img.shields.io/github/forks/le5le-com/topology?style=social)
  • excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams ![](https://img.shields.io/github/stars/excalidraw/excalidraw?style=social) ![](https://img.shields.io/github/forks/excalidraw/excalidraw?style=social)
  • diagram-maker - maker/examples/LeftRightRectangular.html)] - 为任何图形类数据提供交互式编辑器的库 ![](https://img.shields.io/github/stars/awslabs/diagram-maker?style=social) ![](https://img.shields.io/github/forks/awslabs/diagram-maker?style=social)
  • x-spreadsheet - spreadsheet/)] - A web-based JavaScript(canvas) spreadsheet. ![](https://img.shields.io/github/stars/myliang/x-spreadsheet?style=social) ![](https://img.shields.io/github/forks/myliang/x-spreadsheet?style=social)
  • Luckysheet - Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source. ![](https://img.shields.io/github/stars/mengshukeji/Luckysheet?style=social) ![](https://img.shields.io/github/forks/mengshukeji/Luckysheet?style=social)
  • sheetsee.js - 👀 📈 Visualize Data from a Google Spreadsheet. ![](https://img.shields.io/github/stars/jlord/sheetsee.js?style=social) ![](https://img.shields.io/github/forks/jlord/sheetsee.js?style=social)
  • SlickGrid - model.html)] - A lightning fast JavaScript grid/spreadsheet. ![](https://img.shields.io/github/stars/mleibman/SlickGrid?style=social) ![](https://img.shields.io/github/forks/mleibman/SlickGrid?style=social)
  • handsontable - JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡ ![](https://img.shields.io/github/stars/handsontable/handsontable?style=social) ![](https://img.shields.io/github/forks/handsontable/handsontable?style=social)
  • cheetah-grid - architect.github.io/cheetah-grid/#/)] - The fastest open-source data table for web. ![](https://img.shields.io/github/stars/future-architect/cheetah-grid?style=social) ![](https://img.shields.io/github/forks/future-architect/cheetah-grid?style=social)
  • Jspreadsheet CE - Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software. ![](https://img.shields.io/github/stars/jspreadsheet/ce?style=social) ![](https://img.shields.io/github/forks/jspreadsheet/ce?style=social)
  • canvas-datagrid - datagrid.js.org/demo.html)] - Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element. ![](https://img.shields.io/github/stars/TonyGermaneri/canvas-datagrid?style=social) ![](https://img.shields.io/github/forks/TonyGermaneri/canvas-datagrid?style=social)
  • D3 - Bring data to life with SVG, Canvas and HTML. 📊📈🎉 ![](https://img.shields.io/github/stars/d3/d3?style=social) ![](https://img.shields.io/github/forks/d3/d3?style=social)
  • awesome-d3 - A list of D3 libraries, plugins and utilities. ![](https://img.shields.io/github/stars/wbkd/awesome-d3?style=social) ![](https://img.shields.io/github/forks/wbkd/awesome-d3?style=social)
  • angular-charts - angular directives for creating common charts using d3. ![](https://img.shields.io/github/stars/chinmaymk/angular-charts?style=social) ![](https://img.shields.io/github/forks/chinmaymk/angular-charts?style=social)
  • nvd3 - community.github.io/nvd3/)] - angular directives for creating common charts using d3. ![](https://img.shields.io/github/stars/novus/nvd3?style=social) ![](https://img.shields.io/github/forks/novus/nvd3?style=social)
  • c3 - 📊 A D3-based reusable chart library. ![](https://img.shields.io/github/stars/c3js/c3?style=social) ![](https://img.shields.io/github/forks/c3js/c3?style=social)
  • dc.js - js.github.io/dc.js/)] - Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js. ![](https://img.shields.io/github/stars/dc-js/dc.js?style=social) ![](https://img.shields.io/github/forks/dc-js/dc.js?style=social)
  • britecharts - bar.html)] - Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations. ![](https://img.shields.io/github/stars/britecharts/britecharts?style=social) ![](https://img.shields.io/github/forks/britecharts/britecharts?style=social)
  • neo4jd3 - bar.html)] - Neo4j graph visualization using D3.js ![](https://img.shields.io/github/stars/eisman/neo4jd3?style=social) ![](https://img.shields.io/github/forks/eisman/neo4jd3?style=social)
  • nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries ![](https://img.shields.io/github/stars/plouc/nivo?style=social) ![](https://img.shields.io/github/forks/plouc/nivo?style=social)
  • echarts - Apache ECharts is a powerful, interactive charting and data visualization library for browser. ![](https://img.shields.io/github/stars/apache/echarts?style=social) ![](https://img.shields.io/github/forks/apache/echarts?style=social)
  • v-charts - 基于 Vue2.0 和 ECharts 封装的图表组件📈📊. ![](https://img.shields.io/github/stars/ElemeFE/v-charts?style=social) ![](https://img.shields.io/github/forks/ElemeFE/v-charts?style=social)
  • echarts-for-weixin - Apache ECharts (incubating) Apache ECharts (incubating) for wechat app. ![](https://img.shields.io/github/stars/ecomfe/echarts-for-weixin?style=social) ![](https://img.shields.io/github/forks/ecomfe/echarts-for-weixin?style=social)
  • Chart.js - Simple HTML5 Charts using the **canvas** tag. ![](https://img.shields.io/github/stars/chartjs/Chart.js?style=social) ![](https://img.shields.io/github/forks/chartjs/Chart.js?style=social)
  • vue-chartjs - chartjs.org/)] - 📊 Vue.js wrapper for Chart.js ![](https://img.shields.io/github/stars/apertureless/vue-chartjs?style=social) ![](https://img.shields.io/github/forks/apertureless/vue-chartjs?style=social)
  • react-chartjs - common react charting components using chart.js ![](https://img.shields.io/github/stars/reactjs/react-chartjs?style=social) ![](https://img.shields.io/github/forks/reactjs/react-chartjs?style=social)
  • angular-chart.js - chart.js/#top)] - Reactive, responsive, beautiful charts for AngularJS using Chart.js ![](https://img.shields.io/github/stars/jtblin/angular-chart.js?style=social) ![](https://img.shields.io/github/forks/jtblin/angular-chart.js?style=social)
  • AntV - A new generation of data visualization solution from Ant Group.
  • G - next.antv.vision/en/examples/shape)] - A powerful rendering engine implemented with Canvas2D / SVG / WebGL / WebGPU. ![](https://img.shields.io/github/stars/antvis/g?style=social) ![](https://img.shields.io/github/forks/antvis/g?style=social)
  • G2 - 📊 A highly interactive data-driven visualization grammar for statistical charts. ![](https://img.shields.io/github/stars/antvis/g2?style=social) ![](https://img.shields.io/github/forks/antvis/g2?style=social)
  • G2Plot - 🍡 An interactive and responsive charting library. ![](https://img.shields.io/github/stars/antvis/g2plot?style=social) ![](https://img.shields.io/github/forks/antvis/g2plot?style=social)
  • G6 - ♾ A Graph Visualization Framework in JavaScript. ![](https://img.shields.io/github/stars/antvis/g6?style=social) ![](https://img.shields.io/github/forks/antvis/g6?style=social)
  • F2 - f2.gitee.io/zh/examples/gallery)] - 📱📈An elegant, interactive and flexible charting library for mobile. ![](https://img.shields.io/github/stars/antvis/F2?style=social)
  • F2Native - iphonechart_with_upwards_trendAn elegant, interactive and flexible native charting library for mobile. ![](https://img.shields.io/github/stars/antvis/f2native?style=social) ![](https://img.shields.io/github/forks/antvis/f2native?style=social)
  • F6 - F6 is a graph visualization engine which provides quick and smooth operations on mobile devices. ![](https://img.shields.io/github/stars/antvis/f6?style=social) ![](https://img.shields.io/github/forks/antvis/f6?style=social)
  • X6 - 🚀 JavaScript diagramming library that uses SVG and HTML for rendering. ![](https://img.shields.io/github/stars/antvis/x6?style=social) ![](https://img.shields.io/github/forks/antvis/x6?style=social)
  • XFlow - US/docs/tutorial/intro/getting-started)] - Based on X6 & React, professional solution for graph editing engine. ![](https://img.shields.io/github/stars/antvis/XFlow?style=social) ![](https://img.shields.io/github/forks/antvis/XFlow?style=social)
  • S2 - ⚡️ Practical analytical Table rendering core lib. ![](https://img.shields.io/github/stars/antvis/s2?style=social) ![](https://img.shields.io/github/forks/antvis/s2?style=social)
  • L7 - 🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps. ![](https://img.shields.io/github/stars/antvis/l7?style=social) ![](https://img.shields.io/github/forks/antvis/l7?style=social)
  • L7Plot - L7Plot is easy to use, rich charts, support customized geospatial charts Library. ![](https://img.shields.io/github/stars/antvis/L7Plot?style=social) ![](https://img.shields.io/github/forks/antvis/L7Plot?style=social)
  • Graphin - menu)] - A React toolkit for graph visualization based on G6. ![](https://img.shields.io/github/stars/antvis/graphin?style=social) ![](https://img.shields.io/github/forks/antvis/graphin?style=social)
  • Ant Design Charts - A React Chart Library ![](https://img.shields.io/github/stars/ant-design/ant-design-charts?style=social) ![](https://img.shields.io/github/forks/ant-design/ant-design-charts?style=social)
  • AVA - robot A framework for automated visual analytics. ![](https://img.shields.io/github/stars/antvis/ava?style=social) ![](https://img.shields.io/github/forks/antvis/ava?style=social)
  • Viser - A toolkit fit for data vis engineer based on G2. Support React, Vue and AngularJS. ![](https://img.shields.io/github/stars/viserjs/viser?style=social) ![](https://img.shields.io/github/forks/viserjs/viser?style=social)
  • highcharts - Highcharts JS, the JavaScript charting framework. ![](https://img.shields.io/github/stars/highcharts/highcharts?style=social) ![](https://img.shields.io/github/forks/highcharts/highcharts?style=social)
  • wx-charts - charts-demo)] - Charts for WeChat Mini Program. ![](https://img.shields.io/github/stars/xiaolin3303/wx-charts?style=social) ![](https://img.shields.io/github/forks/xiaolin3303/wx-charts?style=social)
  • wordcloud2.js - js.timdream.org/#love)] - Tag cloud/Wordle presentation on 2D canvas or HTML. ![](https://img.shields.io/github/stars/timdream/wordcloud2.js?style=social) ![](https://img.shields.io/github/forks/timdream/wordcloud2.js?style=social)
  • chartist-js - js/examples.html)] - Simple responsive charts. ![](https://img.shields.io/github/stars/gionkunz/chartist-js?style=social) ![](https://img.shields.io/github/forks/gionkunz/chartist-js?style=social)
  • charts - Simple, responsive, modern SVG Charts with zero dependencies. ![](https://img.shields.io/github/stars/frappe/charts?style=social) ![](https://img.shields.io/github/forks/frappe/charts?style=social)
  • flot - Attractive JavaScript charts for jQuery. ![](https://img.shields.io/github/stars/flot/flot?style=social) ![](https://img.shields.io/github/forks/flot/flot?style=social)
  • apexcharts.js - chart-demos/)] - 📊 Interactive JavaScript Charts built on SVG. ![](https://img.shields.io/github/stars/apexcharts/apexcharts.js?style=social) ![](https://img.shields.io/github/forks/apexcharts/apexcharts.js?style=social)
  • plotly.js - Open-source JavaScript charting library behind Plotly and Dash. ![](https://img.shields.io/github/stars/plotly/plotly.js?style=social) ![](https://img.shields.io/github/forks/plotly/plotly.js?style=social)
  • easy-pie-chart - easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values. ![](https://img.shields.io/github/stars/rendro/easy-pie-chart?style=social) ![](https://img.shields.io/github/forks/rendro/easy-pie-chart?style=social)
  • react-vis - vis/examples/showcases/axes)] - Data Visualization Components. ![](https://img.shields.io/github/stars/uber/react-vis?style=social) ![](https://img.shields.io/github/forks/uber/react-vis?style=social)
  • vega - A visualization grammar. ![](https://img.shields.io/github/stars/vega/vega?style=social) ![](https://img.shields.io/github/forks/vega/vega?style=social)
  • heatmap.js - 🔥 JavaScript Library for HTML5 canvas based heatmaps. ![](https://img.shields.io/github/stars/pa7/heatmap.js?style=social) ![](https://img.shields.io/github/forks/pa7/heatmap.js?style=social)
  • zeu - command-center.html)] - A JavaScript library for real-time visualization. ![](https://img.shields.io/github/stars/shzlw/zeu?style=social) ![](https://img.shields.io/github/forks/shzlw/zeu?style=social)
  • HQChart - Wechat applet Shanghai and Shenzhen / Hong Kong stocks / digital currency / futures / U.S. stock K-line (Kline), trend chart, zoom, drag, crosshairs, drawing tools, screenshots, chip charts, analyst syntax, tongdaxin syntax, (wheat syntax), third-party data replacement interface. ![](https://img.shields.io/github/stars/jones2000/HQChart?style=social) ![](https://img.shields.io/github/forks/jones2000/HQChart?style=social)
  • canvas-gauges - gauges.com/documentation/examples/)] - HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base. ![](https://img.shields.io/github/stars/Mikhus/canvas-gauges?style=social) ![](https://img.shields.io/github/forks/Mikhus/canvas-gauges?style=social)
  • lightweight-charts - charts/)] - Financial lightweight charts built with HTML5 canvas. ![](https://img.shields.io/github/stars/tradingview/lightweight-charts?style=social) ![](https://img.shields.io/github/forks/tradingview/lightweight-charts?style=social)
  • html2canvas - Screenshots with JavaScript. ![](https://img.shields.io/github/stars/niklasvh/html2canvas?style=social) ![](https://img.shields.io/github/forks/niklasvh/html2canvas?style=social)
  • dom-to-image - Generates an image from a DOM node using HTML5 canvas. ![](https://img.shields.io/github/stars/tsayen/dom-to-image?style=social) ![](https://img.shields.io/github/forks/tsayen/dom-to-image?style=social)
  • html-to-image - ✂️ Generates an image from a DOM node using HTML5 canvas and SVG. ![](https://img.shields.io/github/stars/bubkoo/html-to-image?style=social) ![](https://img.shields.io/github/forks/bubkoo/html-to-image?style=social)
  • canvas2image - a tool for saving or converting canvas as img. ![](https://img.shields.io/github/stars/hongru/canvas2image?style=social) ![](https://img.shields.io/github/forks/hongru/canvas2image?style=social)
  • mp_canvas_drawer - Canvas drawing picture assistant on wechat miniapp, making and sharing pictures of circle of friends with a JSON. ![](https://img.shields.io/github/stars/kuckboy1994/mp_canvas_drawer?style=social) ![](https://img.shields.io/github/forks/kuckboy1994/mp_canvas_drawer?style=social)
  • vue-canvas-poster - demo/#/example/poster)] - Vue poster,a lightweight vue component that draws canvas images via css properties. ![](https://img.shields.io/github/stars/sunniejs/vue-canvas-poster?style=social) ![](https://img.shields.io/github/forks/sunniejs/vue-canvas-poster?style=social)
  • wxa-plugin-canvas - Wechat applet poster component ![](https://img.shields.io/github/stars/jasondu/wxa-plugin-canvas?style=social) ![](https://img.shields.io/github/forks/jasondu/wxa-plugin-canvas?style=social)
  • html2pdf.js - Client-side HTML-to-PDF rendering using pure JS. ![](https://img.shields.io/github/stars/eKoopmans/html2pdf.js?style=social) ![](https://img.shields.io/github/forks/eKoopmans/html2pdf.js?style=social)
  • rasterizeHTML.js - Renders HTML into the browser's canvas. ![](https://img.shields.io/github/stars/cburgmer/rasterizeHTML.js?style=social) ![](https://img.shields.io/github/forks/cburgmer/rasterizeHTML.js?style=social)
  • JavaScript-Canvas-to-Blob - JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects. ![](https://img.shields.io/github/stars/blueimp/JavaScript-Canvas-to-Blob?style=social) ![](https://img.shields.io/github/forks/blueimp/JavaScript-Canvas-to-Blob?style=social)
  • jsgif - Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS. ![](https://img.shields.io/github/stars/antimatter15/jsgif?style=social) ![](https://img.shields.io/github/forks/antimatter15/jsgif?style=social)
  • whammy - A real time javascript webm encoder based on a canvas hack. ![](https://img.shields.io/github/stars/antimatter15/whammy?style=social) ![](https://img.shields.io/github/forks/antimatter15/whammy?style=social)
  • js-imagediff - JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas. ![](https://img.shields.io/github/stars/HumbleSoftware/js-imagediff?style=social) ![](https://img.shields.io/github/forks/HumbleSoftware/js-imagediff?style=social)
  • canvas2svg - Translates HTML5 Canvas draw commands to SVG ![](https://img.shields.io/github/stars/gliffy/canvas2svg?style=social) ![](https://img.shields.io/github/forks/gliffy/canvas2svg?style=social)
  • canvg - Javascript SVG parser and renderer on Canvas. ![](https://img.shields.io/github/stars/canvg/canvg?style=social) ![](https://img.shields.io/github/forks/canvg/canvg?style=social)
  • tui.image-editor - editor/latest/tutorial-example01-includeUi)] - 🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters. ![](https://img.shields.io/github/stars/nhn/tui.image-editor?style=social) ![](https://img.shields.io/github/forks/nhn/tui.image-editor?style=social)
  • merge-images - Easily compose images together without messing around with canvas. ![](https://img.shields.io/github/stars/lukechilds/merge-images?style=social) ![](https://img.shields.io/github/forks/lukechilds/merge-images?style=social)
  • we-cropper - [email protected]/docs/assets/online.jpg)] - Wechat miniapp image cutting tool. ![](https://img.shields.io/github/stars/we-plugin/we-cropper?style=social) ![](https://img.shields.io/github/forks/we-plugin/we-cropper?style=social)
  • miniPaint - online image editor. ![](https://img.shields.io/github/stars/viliusle/miniPaint?style=social) ![](https://img.shields.io/github/forks/viliusle/miniPaint?style=social)
  • animockup - Create animated mockups in the browser 🔥 ![](https://img.shields.io/github/stars/alyssaxuu/animockup?style=social) ![](https://img.shields.io/github/forks/alyssaxuu/animockup?style=social)
  • vintageJS - Add a retro/vintage effect to images using the HTML5 canvas element. ![](https://img.shields.io/github/stars/rendro/vintageJS?style=social) ![](https://img.shields.io/github/forks/rendro/vintageJS?style=social)
  • glitch-canvas - glitch/)] - glitch your canvas element. ![](https://img.shields.io/github/stars/snorpey/glitch-canvas?style=social) ![](https://img.shields.io/github/forks/snorpey/glitch-canvas?style=social)
  • JIC - J I C is a Javascript Image Compressor using HTML5 Canvas & File API that allows you to compress your jpeg & png images before uploading to the server (100% client-side and no extra libraries required!). ![](https://img.shields.io/github/stars/brunobar79/J-I-C?style=social) ![](https://img.shields.io/github/forks/brunobar79/J-I-C?style=social)
  • context-blender - Photoshop-style blend modes for HTML Canvas Contexts. ![](https://img.shields.io/github/stars/Phrogz/context-blender?style=social) ![](https://img.shields.io/github/forks/Phrogz/context-blender?style=social)
  • ios-imagefile-megapixel - Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel), which causes unexpected subsampling when drawing it in canvas. ![](https://img.shields.io/github/stars/stomita/ios-imagefile-megapixel?style=social) ![](https://img.shields.io/github/forks/stomita/ios-imagefile-megapixel?style=social)
  • fast-average-color - average-color.github.io/examples/background.html)] - 🍏🍊🍅 Fast Average Color. ![](https://img.shields.io/github/stars/fast-average-color/fast-average-color?style=social) ![](https://img.shields.io/github/forks/fast-average-color/fast-average-color?style=social)
  • mcanvas - mcanvas is a image handler plugin that can easily merge, crop, compress, filter the image and export a image of base64 finally. ![](https://img.shields.io/github/stars/xd-tayde/mcanvas?style=social) ![](https://img.shields.io/github/forks/xd-tayde/mcanvas?style=social)
  • canvasfilters - Canvas image filters ![](https://img.shields.io/github/stars/kig/canvasfilters?style=social) ![](https://img.shields.io/github/forks/kig/canvasfilters?style=social)
  • jspaint - 🎨 Classic MS Paint, REVIVED + ✨Extras. ![](https://img.shields.io/github/stars/1j01/jspaint?style=social) ![](https://img.shields.io/github/forks/1j01/jspaint?style=social)
  • drawingboard.js - A canvas based drawing app that you can integrate easily on your website. ![](https://img.shields.io/github/stars/Leimi/drawingboard.js?style=social) ![](https://img.shields.io/github/forks/Leimi/drawingboard.js?style=social)
  • drawingboard - Advanced Sketchpad - freehand, straight / dashed lines, arrows, all geometry. ![](https://img.shields.io/github/stars/vipstone/drawingboard?style=social) ![](https://img.shields.io/github/forks/vipstone/drawingboard?style=social)
  • draw - Web canvas that support pen pressure. ![](https://img.shields.io/github/stars/amoshydra/draw?style=social) ![](https://img.shields.io/github/forks/amoshydra/draw?style=social)
  • signature_pad - HTML5 canvas based smooth signature drawing. ![](https://img.shields.io/github/stars/szimek/signature_pad?style=social) ![](https://img.shields.io/github/forks/szimek/signature_pad?style=social)
  • vue-signature-pad - 🖋 Vue Signature Pad Component. ![](https://img.shields.io/github/stars/neighborhood999/vue-signature-pad?style=social) ![](https://img.shields.io/github/forks/neighborhood999/vue-signature-pad?style=social)
  • react-signature-pad - A signature pad implementation for react. ![](https://img.shields.io/github/stars/blackjk3/react-signature-pad?style=social) ![](https://img.shields.io/github/forks/blackjk3/react-signature-pad?style=social)
  • angular-signature - HTML5 canvas based smooth signature drawing as angularJS directive. ![](https://img.shields.io/github/stars/legalthings/angular-signature?style=social) ![](https://img.shields.io/github/forks/legalthings/angular-signature?style=social)
  • react-native-signature-pad - React Native wrapper around szimek's Canvas based Signature Pad. ![](https://img.shields.io/github/stars/kevinstumpf/react-native-signature-pad?style=social) ![](https://img.shields.io/github/forks/kevinstumpf/react-native-signature-pad?style=social)
  • signature-pad - pond.github.io/signature-pad/examples/require-drawn-signature.html)] - A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration. ![](https://img.shields.io/github/stars/thread-pond/signature-pad?style=social) ![](https://img.shields.io/github/forks/thread-pond/signature-pad?style=social)
  • canvas-draw - Handwritten signature or drawing with canvas -- supports PC and mobile terminals and horizontal screen. ![](https://img.shields.io/github/stars/Louiszhai/canvas-draw?style=social) ![](https://img.shields.io/github/forks/Louiszhai/canvas-draw?style=social)
  • smooth-signature - signature/demo/index.html)] - H5 signature pad for mobile and pc. ![](https://img.shields.io/github/stars/linjc/smooth-signature?style=social) ![](https://img.shields.io/github/forks/linjc/smooth-signature?style=social)
  • wavesurfer.js - js.org/examples/)] - Navigable waveform built on Web Audio and Canvas. ![](https://img.shields.io/github/stars/katspaugh/wavesurfer.js?style=social) ![](https://img.shields.io/github/forks/katspaugh/wavesurfer.js?style=social)
  • waveforms - An interactive, explorable explanation about the peculiar magic of sound waves. ![](https://img.shields.io/github/stars/joshwcomeau/waveforms?style=social) [[Online Demo](https://pudding.cool/2018/02/waveforms/)] ![](https://img.shields.io/github/forks/joshwcomeau/waveforms?style=social)
  • siriwave - The Apple® Siri wave-form replicated in a JS library. ![](https://img.shields.io/github/stars/kopiro/siriwave?style=social) ![](https://img.shields.io/github/forks/kopiro/siriwave?style=social)
  • waves - Ocean Wave Simulation. ![](https://img.shields.io/github/stars/dli/waves?style=social) ![](https://img.shields.io/github/forks/dli/waves?style=social)
  • waveform-playlist - playlist/)] - Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity. ![](https://img.shields.io/github/stars/naomiaro/waveform-playlist?style=social) ![](https://img.shields.io/github/forks/naomiaro/waveform-playlist?style=social)
  • wavedrom - 🌊 Digital timing diagram rendering engine. ![](https://img.shields.io/github/stars/wavedrom/wavedrom?style=social) ![](https://img.shields.io/github/forks/wavedrom/wavedrom?style=social)
  • Proton - Javascript particle animation library. ![](https://img.shields.io/github/stars/drawcall/Proton?style=social) ![](https://img.shields.io/github/forks/drawcall/Proton?style=social)
  • three.proton - three.proton is a magical 3d particle engine using three.js library. It is based on the Proton engine library. ![](https://img.shields.io/github/stars/drawcall/three.proton?style=social) ![](https://img.shields.io/github/forks/drawcall/three.proton?style=social)
  • bubbly-bg - bg/)] - Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped) ![](https://img.shields.io/github/stars/tipsy/bubbly-bg?style=social) ![](https://img.shields.io/github/forks/tipsy/bubbly-bg?style=social)
  • react-particle-effect-button - bullshit.github.io/react-particle-effect-button/)] - Bursting particle effect buttons for React 🎉 ![](https://img.shields.io/github/stars/transitive-bullshit/react-particle-effect-button?style=social) ![](https://img.shields.io/github/forks/transitive-bullshit/react-particle-effect-button?style=social)
  • pasition - Path Transition with little JS code, render to anywhere. ![](https://img.shields.io/github/stars/dntzhang/pasition?style=social) ![](https://img.shields.io/github/forks/dntzhang/pasition?style=social)
  • canvid - tiny js library for playing video on canvas elements (without audio) ![](https://img.shields.io/github/stars/gka/canvid?style=social) ![](https://img.shields.io/github/forks/gka/canvid?style=social)
  • blobity - The cursor is the heart of any interaction with the web. Why not take it to the next level? 🚀 ![](https://img.shields.io/github/stars/gmrchk/blobity?style=social) ![](https://img.shields.io/github/forks/gmrchk/blobity?style=social)
  • pts - A library for visualization and creative-coding. ![](https://img.shields.io/github/stars/williamngan/pts?style=social) ![](https://img.shields.io/github/forks/williamngan/pts?style=social)
  • qrious - Pure JavaScript library for QR code generation using canvas. ![](https://img.shields.io/github/stars/neocotic/qrious?style=social) ![](https://img.shields.io/github/forks/neocotic/qrious?style=social)
  • qrcodejs - Cross-browser QRCode generator for javascript. ![](https://img.shields.io/github/stars/davidshimjs/qrcodejs?style=social) ![](https://img.shields.io/github/forks/davidshimjs/qrcodejs?style=social)
  • node-qrcode - qr code generator ![](https://img.shields.io/github/stars/soldair/node-qrcode?style=social) ![](https://img.shields.io/github/forks/soldair/node-qrcode?style=social)
  • wifi-card - 📶 Print a QR code for connecting to your WiFi (wificard.io) ![](https://img.shields.io/github/stars/bndw/wifi-card?style=social) ![](https://img.shields.io/github/forks/bndw/wifi-card?style=social)
  • jsqrcode - Javascript Javascript QRCode scanner. ![](https://img.shields.io/github/stars/LazarSoft/jsqrcode?style=social) ![](https://img.shields.io/github/forks/LazarSoft/jsqrcode?style=social)
  • instascan - HTML5 QR code scanner using your webcam. ![](https://img.shields.io/github/stars/schmich/instascan?style=social) ![](https://img.shields.io/github/forks/schmich/instascan?style=social)
  • qrcode.react - A QRCode component for use with React. ![](https://img.shields.io/github/stars/zpao/qrcode.react?style=social) ![](https://img.shields.io/github/forks/zpao/qrcode.react?style=social)
  • qrbtf - An art QR code (qrcode) beautifier. ![](https://img.shields.io/github/stars/ciaochaos/qrbtf?style=social) ![](https://img.shields.io/github/forks/ciaochaos/qrbtf?style=social)
  • Awesome-qr.js - An awesome QR code generator written in JavaScript. ![](https://img.shields.io/github/stars/SumiMakito/Awesome-qr.js?style=social) ![](https://img.shields.io/github/forks/SumiMakito/Awesome-qr.js?style=social)
  • jquery-qrcode - qrcode generation standalone (doesn't depend on external services). ![](https://img.shields.io/github/stars/jeromeetienne/jquery-qrcode?style=social) ![](https://img.shields.io/github/forks/jeromeetienne/jquery-qrcode?style=social)
  • vue-qrcode-reader - qrcode-reader/demos/DecodeAll.html)] - A set of Vue.js components for detecting and decoding QR codes. ![](https://img.shields.io/github/stars/gruhn/vue-qrcode-reader?style=social) ![](https://img.shields.io/github/forks/gruhn/vue-qrcode-reader?style=social)
  • weapp-qrcode - qrcode#demo)] - Webapp.qrcode.js in wechat applet, quickly generate QR code. ![](https://img.shields.io/github/stars/yingye/weapp-qrcode?style=social) ![](https://img.shields.io/github/forks/yingye/weapp-qrcode?style=social)
  • qr-image - Yet another QR code generator. ![](https://img.shields.io/github/stars/alexeyten/qr-image?style=social) ![](https://img.shields.io/github/forks/alexeyten/qr-image?style=social)
  • jigsaw - Canvas sliding verification code. ![](https://img.shields.io/github/stars/yeild/jigsaw?style=social) ![](https://img.shields.io/github/forks/yeild/jigsaw?style=social)
  • jq_slideImage - JQuery Slide Puzzle verification plugin.
  • jigsaw - Canvas sliding verification code. ![](https://img.shields.io/github/stars/yeild/jigsaw?style=social) ![](https://img.shields.io/github/forks/yeild/jigsaw?style=social)
  • JQuery verification-code resources
  • node-canvas - Node canvas is a Cairo backed Canvas implementation for NodeJS. ![](https://img.shields.io/github/stars/Automattic/node-canvas?style=social) ![](https://img.shields.io/github/forks/Automattic/node-canvas?style=social)
  • skia-canvas - A canvas environment for Node.js ![](https://img.shields.io/github/stars/samizdatco/skia-canvas?style=social) ![](https://img.shields.io/github/forks/samizdatco/skia-canvas?style=social)
  • ExplorerCanvas - Canvas for IE8 and older. ![](https://img.shields.io/github/stars/arv/ExplorerCanvas?style=social) ![](https://img.shields.io/github/forks/arv/ExplorerCanvas?style=social)
  • paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. ![](https://img.shields.io/github/stars/paperjs/paper.js?style=social) ![](https://img.shields.io/github/forks/paperjs/paper.js?style=social)
  • react-canvas - High performance canvas rendering for React components ![](https://img.shields.io/github/stars/Flipboard/react-canvas?style=social) ![](https://img.shields.io/github/forks/Flipboard/react-canvas?style=social)
  • react-native-canvas - A Canvas component for React Native. ![](https://img.shields.io/github/stars/iddan/react-native-canvas?style=social) ![](https://img.shields.io/github/forks/iddan/react-native-canvas?style=social)
  • CodePen Canvas Resources
  • ANIMPEN Canvas Resources
  • JQuery之家 Canvas Resources
  • jq22 Canvas Resources
  • People You Should Follow on CodePen
  • canvas-confetti - confetti/)] - 🎉 on-demand confetti gun. ![](https://img.shields.io/github/stars/catdad/canvas-confetti?style=social) ![](https://img.shields.io/github/forks/catdad/canvas-confetti?style=social)
  • lucky-canvas - The lottery plugin based on ts + canvas. [big turntable / Jiugongge] developed, rainbow has a set of source code, which is suitable for multi terminal framework JS / Vue / react / taro / uniapp / wechat miniapp, etc. ![](https://img.shields.io/github/stars/buuing/lucky-canvas?style=social) ![](https://img.shields.io/github/forks/buuing/lucky-canvas?style=social)
  • CanvasInput - html5-canvas-text-input)] - HTML5 Canvas Text Input. ![](https://img.shields.io/github/stars/goldfire/CanvasInput?style=social) ![](https://img.shields.io/github/forks/goldfire/CanvasInput?style=social)
  • wind-js - js/)] - An demo animation of wind on a Canvas layer in the JSAPI. ![](https://img.shields.io/github/stars/Esri/wind-js?style=social) ![](https://img.shields.io/github/forks/Esri/wind-js?style=social)
  • curvejs - Made curve a dancer in HTML5 canvas. ![](https://img.shields.io/github/stars/AlloyTeam/curvejs?style=social) ![](https://img.shields.io/github/forks/AlloyTeam/curvejs?style=social)
  • canvas-nest.js - ♋ Interactive Particle / Nest System With JavaScript and Canvas, no jQuery. ![](https://img.shields.io/github/stars/hustcc/canvas-nest.js?style=social) ![](https://img.shields.io/github/forks/hustcc/canvas-nest.js?style=social)
  • canvas-special - There are many classic canvas examples, such as dynamic ion background, colorful small ball, greedy snake, tank war, 100 floors down for men, heart-shaped text, etc. ![](https://img.shields.io/github/stars/bxm0927/canvas-special?style=social) ![](https://img.shields.io/github/forks/bxm0927/canvas-special?style=social)
  • canvas demos
  • shape-shifter - shifter/)] - A canvas experiment in which a set of particles is used to render different shapes based on the user's input. It supports multiple modes: text, countdown, time and icons. ![](https://img.shields.io/github/stars/kennethcachia/shape-shifter?style=social) ![](https://img.shields.io/github/forks/kennethcachia/shape-shifter?style=social)
  • canvas-test - some cnavas demo.
  • 可视化私房菜 - 可视化国家队的私房菜,用心烹调,以飨读者。
  • 体系化建设 BI 业务定制图表
  • 图可视化知多少 - 图可视化、图分析及图编辑知识库。
  • G2Plot 可视化圈子
  • G2:图形、交互语法
  • 可视化小讲堂
  • 如何看待 Google Docs 将从 HTML 迁移到基于 Canvas 渲染? - @知乎 海蓝
  • 用Canvas画一只会跟着鼠标走的小狗 - @知乎 李银城
  • 用Canvas + WASM画一个迷宫 - @知乎 李银城
  • 玩转「Canvas」 - 编程圈 @糖少
  • JS之使用Canvas绘图 - 简书 @LemonnYan
  • 一个少女心满满的例子带你入门 Canvas - Juejin @sunshine小小倩
  • 为了让她10分钟入门canvas,我熬夜写了3个小项目和这篇文章 - Juejin @Sunshine_Lin
  • 更优雅地基于 canvas 在前端画海报 - Juejin @2dunn
  • 【🎨万物皆可动】详解Canvas路径动画 - Juejin @ChanningHyl
  • 产品经理:你能不能用div给我画条龙? - Juejin @大帅老猿
  • Canvas性能优化 - Juejin @清夜
  • 为了让你们进阶Canvas,我花7小时写了3个有趣的小游戏!!! - Juejin @Sunshine_Lin
  • 十分钟实现灭霸打响指灰飞烟灭的效果 - Juejin @wangzy2019
  • 匠心打造canvas签名组件 - @路易斯
  • zyf214329704