Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
awesome-canvas
https://github.com/ygs-code/awesome-canvas
Last synced: 2 days ago
JSON representation
-
Tutorials
- The Chinese series of learning tutorials of HTML5 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 - RUNOOB Tutorial
- HTML5 Canvas - W3school Tutorial
- HTML5 Canvas - 廖雪峰 Tutorial
- HTML5 Canvas - IMOOC Tutorial
-
Libraries
-
Canvas draw
- DarkroomJS - Extensible image editing tool in your browser.  
- 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.  
- react-sketch - sketch/)] - Sketch Tool for React-based applications, backed up by FabricJS.  
- vue-fabric - Vue fabric component created based on canvas fabric.js library, customized drawing board, picture combination drawing.  
- fabric-js-editor - An HTML5 vector image editor built with Fabric.js.  
- fabric-brush - brush/)] - Crayon is a canvas brush based on an awesome framework Fabric.js.  
- DrawerJs - A customizable WYSIWYG HTML canvas editor.  
- myvision - Computer vision based ML training data generation tool 🚀.  
- vue-konva - Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.  
- react-proto - 🎨 React application prototyping tool for developers and designers 🏗️.  
- wxDraw - A lightweight canvas library which providing 2d draw for weapp.  
- mesh.js - A graphics system born for visualization.  
- taro-plugin-canvas - Canvas component for wechat miniapp based on taro, Generate shared pictures through configuration.  
- fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser.  
- angular-fabric - Control a FabricJS canvas with AngularJS.  
- konva Chinese Docs
- two.js - A renderer agnostic two-dimensional drawing api for the web.  
- spritejs - A cross platform high-performance graphics system.  
- concretejs - A lightweight Html5 Canvas framework that enables hit detection, layer support, pixel ratio management, exports, and downloads. 
- cax - HTML5 Canvas 2D Rendering Engine.  
- origami.js - Powerful and Lightweight Library to create using HTML5 Canvas.  
- react-native-sketch-canvas - A React Native component for drawing by touching on both iOS and Android.  
- atrament.js - A small JS library for beautiful drawing and handwriting on the HTML Canvas.  
- fabricjs-image-editor-origin - image-editor-f62330.netlify.app/)] - fabric.js javascript image editor.  
- react-konva - React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.  
- fabricjs-image-editor-origin - image-editor-f62330.netlify.app/)] - fabric.js javascript image editor.  
-
3D libraries
- obelisk.js - Build pixel isometric graphics with HTML5 canvas  
- Oimo.js - th.github.io/Oimo.js/index.html#basic)] - Lightweight 3d physics engine for javascript.  
- troika - A JavaScript framework for interactive 3D and 2D visualizations.  
- three.js - JavaScript 3D Library.  
- zdog - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG  
- 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.  
- isomer - Simple isometric graphics library for HTML5 canvas.  
- curtainsjs - started.html#basic-setup)] - curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.  
- seen - simple-interactive.html)] - Render 3D scenes into SVG or HTML5 Canvas.  
-
VR/AR
- Panolens.js - Javascript panorama viewer based on Three.js  
- Pannellum - Pannellum is a lightweight, free, and open source panorama viewer for the web.  
- Marzipano - tour/)] A 360° media viewer for the modern web.  
- JS-Cloudimage-360-View - cloudimage-360-view/)] Engage your customers with a stunning 360 view of your products.  
- A-Frame
- exokit - Native VR/AR/XR engine for JavaScript 🦖  
- webvr-boilerplate - boilerplate/#)] - A starting point for web-based VR experiences that work on all VR headsets.  
-
Game engine
- taro - A lightweight 3D game engine for the web.  
- turbulenz_engine - Turbulenz is a modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.  
- Babylon.js - Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.  
- eva.js - Eva.js is a front-end game engine specifically for creating interactive game projects.  
- PlayCanvas - Fast and lightweight JavaScript game engine built on WebGL and glTF  
- Sketchbook - 3D playground built on three.js and cannon.js  
- Sein.js - Progressive web 3D game engine.  
- PuzzleScript - Open Source HTML5 Puzzle Game Engine  
- LittleJS - The Tiny JavaScript Game Engine That Can! 🚂  
- Black - World's fastest HTML5 2D game engine 🛸  
- pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.  
- Excalibur - 🎮 An easy to use 2D HTML5 game engine written in TypeScript.  
- games - List of small games based on phaser  
- hex-engine - engine.dev/docs/examples)] - A modern 2D game engine for the browser.  
- Hilo - A Cross-end HTML5 Game development solution developed by Alibaba Group.  
- melonJS - a fresh & lightweight javascript game engine.  
- phaser-examples - Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework.  
- phaser3-examples - Phaser 3 Examples.  
- 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.  
- phaser3-project-template - A Phaser 3 Project Template.  
-
Physics engine
- box2d.js - Port of Box2D to JavaScript using Emscripten.  
- p2.js - JavaScript 2D physics library.  
- planck.js - 2D JavaScript Physics Engine.  
-
Flowchart
- drawio - a configurable diagramming/whiteboarding visualization application.  
- Drawflow - Simple flow library 🖥️🖱️  
- Flowy - The minimal javascript library to create flowcharts ✨  
- flowchart.js - Draws simple SVG flow chart diagrams from textual representation of the diagram.  
- mermaid - live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ)] - Generation of diagram and flowchart from text in a similar manner as markdown.  
- wireflow - Wireflow - user flow chart real-time collaborative tool.  
- butterfly - dag.gitee.io/butterfly-dag/demo/analysis)] - 🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field.  
- GOJS - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.  
-
Gantt
- gantt - Open Source Javascript Gantt.  
- jQueryGantt - jQuery Gantt editor.  
- Gantt-Chart - Gantt chart library using D3.js.  
- dhtmlxGantt - GPL version of Javascript Gantt Chart.  
- gantt-for-react - for-react/)] - 🌿 Frappe Gantt components for React wrapper.  
- jquery.ganttView - An editable jQuery Gantt chart plugin.  
- wl-gantt - An easy-to-use gantt plug-in for the vue framework.  
- 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 ]  
-
Graph Editing
- idraw - A simple JavaScript framework for Drawing on the web.  
- Workflow Designer - flowable workflow designer base on @antv/g6。  
- vue-g6-editor - g6-editor/blob/master/1.gif)] - Visual graph editor based on vue ande g6.  
- X-Flowchart-Vue - Flowchart-Vue/)] - A visual graph editor based on G6 and Vue.  
- ng-antv - Angular wrapper around the antv libraries.  
- welabx-g6 - g6/dist/?_blank)] - welabx - antv G6.  
- excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams  
- diagram-maker - maker/examples/LeftRightRectangular.html)] - 为任何图形类数据提供交互式编辑器的库  
- web-pdm - ER graph tools based on G6, the ultimate goal is to make an online version of powerdesigner.  
- topology - A diagram (topology, UML) framework uses canvas and typescript.  
-
Spreadsheet
- x-spreadsheet - spreadsheet/)] - A web-based JavaScript（canvas） spreadsheet.  
- sheetsee.js - 👀 📈 Visualize Data from a Google Spreadsheet.  
- SlickGrid - model.html)] - A lightning fast JavaScript grid/spreadsheet.  
- handsontable - JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡  
- cheetah-grid - architect.github.io/cheetah-grid/#/)] - The fastest open-source data table for web.  
- Jspreadsheet CE - Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.  
- 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.  
- Luckysheet - Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.  
-
Charts Libraries
- D3 - Bring data to life with SVG, Canvas and HTML. 📊📈🎉  
- angular-charts - angular directives for creating common charts using d3.  
- dc.js - js.github.io/dc.js/)] - Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js.  
- 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.  
- neo4jd3 - bar.html)] - Neo4j graph visualization using D3.js  
- nivo - nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries  
- echarts - Apache ECharts is a powerful, interactive charting and data visualization library for browser.  
- echarts-for-weixin - Apache ECharts (incubating) Apache ECharts (incubating) for wechat app.  
- Chart.js - Simple HTML5 Charts using the **canvas** tag.  
- react-chartjs - common react charting components using chart.js  
- awesome-d3 - A list of D3 libraries, plugins and utilities.  
- nvd3 - community.github.io/nvd3/)] - angular directives for creating common charts using d3.  
- c3 - 📊 A D3-based reusable chart library.  
- v-charts - 基于 Vue2.0 和 ECharts 封装的图表组件📈📊.  
- vue-chartjs - chartjs.org/)] - 📊 Vue.js wrapper for Chart.js  
- 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.  
- F2 - f2.gitee.io/zh/examples/gallery)] - 📱📈An elegant, interactive and flexible charting library for mobile. 
- L7 - 🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps.  
- Graphin - menu)] - A React toolkit for graph visualization based on G6.  
- Ant Design Charts - A React Chart Library  
- Viser - A toolkit fit for data vis engineer based on G2. Support React, Vue and AngularJS.  
- charts - Simple, responsive, modern SVG Charts with zero dependencies.  
- apexcharts.js - chart-demos/)] - 📊 Interactive JavaScript Charts built on SVG.  
-
Organization charts
- OrgChart - It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.  
-
Poster and Screenshot
- html2canvas - Screenshots with JavaScript.  
-
Particle animation
- Proton - Javascript particle animation library.  
-
Verification code
- jq_slideImage - JQuery Slide Puzzle verification plugin.
- jigsaw - Canvas sliding verification plugin - Jigsaw.
- JQuery verification-code resources
-
Others
- paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.  
- react-native-canvas - A Canvas component for React Native.  
-
-
Books
- HTML5 Canvas开发详解
- TypeScript图形渲染实战：2D架构设计与实现
- 从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入门数据可视化
- HTML5 Canvas核心技术：图形、动画与游戏开发
- 从0到1 HTML5 Canvas动画开发
- HTML5 Canvas核心技术: 图形、动画与游戏开发
- D3 for impatient: interactive Graphics for Programmers and Scientists
- HTML5 Canvas游戏开发实战
-
Resources Website
-
Plugins
-
Others
- 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.  
- canvas-nest.js - ♋ Interactive Particle / Nest System With JavaScript and Canvas, no jQuery.  
-
-
Articles
-
Others
- 可视化私房菜 - 可视化国家队的私房菜，用心烹调，以飨读者。
- 体系化建设 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签名组件 - @路易斯
-
-
Contributor
-
Others
-
Programming Languages
Categories
Sub Categories
Keywords
javascript
33
canvas
28
webgl
17
game-engine
12
svg
9
flowchart
8
fabricjs
8
webxr
7
3d
7
html5
7
react
6
vue
6
visualization
6
typescript
6
gamedev
6
game-development
6
graphics
5
data-visualization
5
canvas2d
5
gantt
5
editor
5
diagram
4
diagrams
4
gantt-chart
4
javascript-gantt
4
spreadsheet
4
chart
4
phaser
4
webgpu
4
webaudio
4
virtual-reality
4
workflow
4
webgl2
4
drawing
4
charts
4
physics-engine
3
d3js
3
grid
3
pixijs
3
datagrid
3
2d
3
excel
3
flow
3
javascript-library
3
ganttjs
3
d3
3
graph
3
g6
3
g6-editor
3
image-editor
3