Data

Tools

Indexes

Applications

Experiments

Awesome

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

awesome-canvas

Canvas资源库大全中文版。An awesome Canvas packages and resources.
https://github.com/chinaBerg/awesome-canvas

Last synced: 15 days ago
JSON representation

Articles

Others

Books

Libraries

3D libraries

  • 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.
  • three.js - JavaScript 3D Library.
  • zdog - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
  • 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.
  • 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.
  • seen - simple-interactive.html)] - Render 3D scenes into SVG or HTML5 Canvas.

Audio Video

  • canvid - tiny js library for playing video on canvas elements (without audio)

Canvas draw

  • fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser.
  • react-konva - React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
  • konva Chinese Docs
  • two.js - A renderer agnostic two-dimensional drawing api for the web.
  • 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.
  • 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.
  • fabricjs-image-editor-origin - image-editor-f62330.netlify.app/)] - fabric.js javascript image editor.
  • 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.
  • atrament.js - A small JS library for beautiful drawing and handwriting on the HTML Canvas.
  • mesh.js - A graphics system born for visualization.
  • taro-plugin-canvas - Canvas component for wechat miniapp based on taro, Generate shared pictures through configuration.
  • pencil.js - ✏️ Nice modular interactive 2D drawing library.
  • p5.js - Hans/examples/)] - JS client-side library for creating graphic and interactive experiences.
  • konva Chinese Docs
  • concretejs - A lightweight Html5 Canvas framework that enables hit detection, layer support, pixel ratio management, exports, and downloads.
  • konva Chinese Docs
  • fabricjs-image-editor-origin - image-editor-f62330.netlify.app/)] - fabric.js javascript image editor.
  • atrament.js - A small JS library for beautiful drawing and handwriting on the HTML Canvas.

Charts Libraries

  • 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 封装的图表组件📈📊.
  • AntV - A new generation of data visualization solution from Ant Group.
  • F2 - f2.gitee.io/zh/examples/gallery)] - 📱📈An elegant, interactive and flexible charting library for mobile.
  • F2Native - iphonechart_with_upwards_trendAn elegant, interactive and flexible native charting library for mobile.
  • F6 - F6 is a graph visualization engine which provides quick and smooth operations on mobile devices.
  • XFlow - US/docs/tutorial/intro/getting-started)] - Based on X6 & React, professional solution for graph editing engine.
  • L7 - 🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps.
  • L7Plot - L7Plot is easy to use, rich charts, support customized geospatial charts Library.
  • Graphin - menu)] - A React toolkit for graph visualization based on G6.
  • Ant Design Charts - A React Chart Library
  • AVA - robot A framework for automated visual analytics.
  • charts - Simple, responsive, modern SVG Charts with zero dependencies.
  • apexcharts.js - chart-demos/)] - 📊 Interactive JavaScript Charts built on SVG.
  • 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
  • angular-chart.js - chart.js/#top)] - Reactive, responsive, beautiful charts for AngularJS using Chart.js
  • G2 - 📊 A highly interactive data-driven visualization grammar for statistical charts.
  • G2Plot - 🍡 An interactive and responsive charting library.
  • S2 - ⚡️ Practical analytical Table rendering core lib.
  • highcharts - Highcharts JS, the JavaScript charting framework.
  • wx-charts - charts-demo)] - Charts for WeChat Mini Program.
  • wordcloud2.js - js.timdream.org/#love)] - Tag cloud/Wordle presentation on 2D canvas or HTML.
  • chartist-js - js/examples.html)] - Simple responsive charts.
  • plotly.js - Open-source JavaScript charting library behind Plotly and Dash.
  • easy-pie-chart - easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values.
  • react-vis - vis/examples/showcases/axes)] - Data Visualization Components.
  • vega - A visualization grammar.
  • heatmap.js - 🔥 JavaScript Library for HTML5 canvas based heatmaps.
  • zeu - command-center.html)] - A JavaScript library for real-time visualization.
  • 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.
  • 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.
  • lightweight-charts - charts/)] - Financial lightweight charts built with HTML5 canvas.
  • nvd3 - community.github.io/nvd3/)] - angular directives for creating common charts using d3.
  • angular-chart.js - chart.js/#top)] - Reactive, responsive, beautiful charts for AngularJS using Chart.js
  • G6 - ♾ A Graph Visualization Framework in JavaScript.
  • Viser - A toolkit fit for data vis engineer based on G2. Support React, Vue and AngularJS.

Creativity

  • pts - A library for visualization and creative-coding.

cursor

  • blobity - The cursor is the heart of any interaction with the web. Why not take it to the next level? 🚀

Data processing

  • html2pdf.js - Client-side HTML-to-PDF rendering using pure JS.
  • rasterizeHTML.js - Renders HTML into the browser's canvas.
  • JavaScript-Canvas-to-Blob - JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.
  • jsgif - Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS.
  • whammy - A real time javascript webm encoder based on a canvas hack.
  • js-imagediff - JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas.
  • canvas2svg - Translates HTML5 Canvas draw commands to SVG
  • canvg - Javascript SVG parser and renderer on Canvas.

Drawingboard

  • jspaint - 🎨 Classic MS Paint, ＲＥＶＩＶＥＤ + ✨Extras.
  • drawingboard.js - A canvas based drawing app that you can integrate easily on your website.
  • drawingboard - Advanced Sketchpad - freehand, straight / dashed lines, arrows, all geometry.
  • draw - Web canvas that support pen pressure.
  • tldraw - a very good whiteboard

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.

Game engine

  • Hilo - A Cross-end HTML5 Game development solution developed by Alibaba Group.
  • melonJS - a fresh & lightweight javascript game engine.
  • Babylon.js - Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
  • 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.
  • 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.
  • Akihabara - About
  • iioEngine - A JavaScript game engine for HTML5 Canvas
  • cocos2d-js - x for js.
  • games - List of small games based on phaser
  • 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.
  • hex-engine - engine.dev/docs/examples)] - A modern 2D game engine for the browser.
  • 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.
  • phaser-examples - Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework.
  • phaser3-examples - Phaser 3 Examples.
  • phaser3-project-template - A Phaser 3 Project Template.
  • stage.js - 2D HTML5 rendering and layout engine for game development.