Skip to content

Latest commit

 

History

History
435 lines (385 loc) · 84.9 KB

README-EN.md

File metadata and controls

435 lines (385 loc) · 84.9 KB
Raw

awesome-canvas

List of awesome HTML5 Canvas with libraries, plugins, examples, course, books and related articles.

Summary

Tutorials

Books

Libraries

Canvas draw

  • fabric.js [Online Demo] - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser.
  • konva [Online Demo] - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
    • konva Chinese Docs
    • react-konva [Online Demo] - React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
    • vue-konva - Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.
    • react-proto - 🎨 React application prototyping tool for developers and designers 🏗️.
  • two.js [Online Demo] - 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 [Online Demo] - A cross platform high-performance graphics system.
  • concretejs [Online Demo]- A lightweight Html5 Canvas framework that enables hit detection, layer support, pixel ratio management, exports, and downloads.
  • cax [Online Demo] - HTML5 Canvas 2D Rendering Engine.
  • wxDraw [Online Demo] - 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.
  • origami.js - Powerful and Lightweight Library to create using HTML5 Canvas.
  • react-native-sketch-canvas [Online Demo] - A React Native component for drawing by touching on both iOS and Android.
  • mesh.js [Online Demo] - A graphics system born for visualization.
  • taro-plugin-canvas - Canvas component for wechat miniapp based on taro, Generate shared pictures through configuration.
  • pencil.js [Online Demo] - ✏️ Nice modular interactive 2D drawing library.
  • p5.js [Online Demo] - JS client-side library for creating graphic and interactive experiences.

3D libraries

  • three.js [Online Demo] - JavaScript 3D Library.
  • zdog [Online Demo] - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
  • curtainsjs [Online Demo] - curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
  • obelisk.js - Build pixel isometric graphics with HTML5 canvas
  • seen [Online Demo] - Render 3D scenes into SVG or HTML5 Canvas.
  • Oimo.js [Online Demo] - Lightweight 3d physics engine for javascript.
  • troika [Online Demo] - A JavaScript framework for interactive 3D and 2D visualizations.
  • phoria.js [Online Demo] - 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 [Online Demo] - Simple isometric graphics library for HTML5 canvas.

VR/AR

Physics engine

Game engine

Flowchart

  • GOJS [Online Demo] - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
  • drawio [Online Demo] - a configurable diagramming/whiteboarding visualization application.
  • Drawflow [Online Demo] - Simple flow library 🖥️🖱️
  • Flowy [Online Demo] - The minimal javascript library to create flowcharts ✨
  • flowchart.js - Draws simple SVG flow chart diagrams from textual representation of the diagram.
  • mermaid [Online Demo] - Generation of diagram and flowchart from text in a similar manner as markdown.
  • wireflow [Online Demo] - Wireflow - user flow chart real-time collaborative tool.
  • butterfly [Online Demo] - 🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field.

Gantt

Organization charts

  • OrgChart [Online Demo] - It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

UML

Graph Editing

Spreadsheet

  • x-spreadsheet [Online Demo] - A web-based JavaScript（canvas） spreadsheet.
  • Luckysheet [Online Demo] - Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.
  • sheetsee.js - 👀 📈 Visualize Data from a Google Spreadsheet.
  • SlickGrid [Online Demo] - A lightning fast JavaScript grid/spreadsheet.
  • handsontable [Online Demo] - JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
  • cheetah-grid [Online Demo] - The fastest open-source data table for web.
  • Jspreadsheet CE [Online Demo] - Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.
  • canvas-datagrid [Online Demo] - 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.

Charts Libraries

  • D3 [Online Demo] - Bring data to life with SVG, Canvas and HTML. 📊📈🎉

    • awesome-d3 - A list of D3 libraries, plugins and utilities.
    • angular-charts - angular directives for creating common charts using d3.
    • nvd3 [Online Demo] - angular directives for creating common charts using d3.
    • c3 [Online Demo] - 📊 A D3-based reusable chart library.
    • dc.js [Online Demo] - Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js.
    • britecharts [Online Demo] - 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 [Online Demo] - Neo4j graph visualization using D3.js
    • nivo [Online Demo] - nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries

  • echarts [Online Demo] - Apache ECharts is a powerful, interactive charting and data visualization library for browser.

  • Chart.js [Online Demo] - Simple HTML5 Charts using the canvas tag.

  • AntV - A new generation of data visualization solution from Ant Group.

    • G [Online Demo] - A powerful rendering engine implemented with Canvas2D / SVG / WebGL / WebGPU.
    • G2 [Online Demo] - 📊 A highly interactive data-driven visualization grammar for statistical charts.
    • G2Plot [Online Demo] - 🍡 An interactive and responsive charting library.
    • G6 [Online Demo] - ♾ A Graph Visualization Framework in JavaScript.
    • F2 [Online Demo] - 📱📈An elegant, interactive and flexible charting library for mobile.
    • F2Native [Online Demo] - iphonechart_with_upwards_trendAn elegant, interactive and flexible native charting library for mobile.
    • F6 [Online Demo] - F6 is a graph visualization engine which provides quick and smooth operations on mobile devices.
    • X6 [Online Demo] - 🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
    • XFlow [Online Demo] - Based on X6 & React, professional solution for graph editing engine.
    • S2 [Online Demo] - ⚡️ Practical analytical Table rendering core lib.
    • L7 [Online Demo] - 🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps.
    • L7Plot [Online Demo] - L7Plot is easy to use, rich charts, support customized geospatial charts Library.
    • Graphin [Online Demo] - A React toolkit for graph visualization based on G6.
    • Ant Design Charts [Online Demo] - A React Chart Library
    • AVA [Online Demo] - robot A framework for automated visual analytics.
    • Viser [Online Demo] - A toolkit fit for data vis engineer based on G2. Support React, Vue and AngularJS.

  • highcharts [Online Demo] - Highcharts JS, the JavaScript charting framework.

  • wx-charts [Online Demo] - Charts for WeChat Mini Program.

  • wordcloud2.js [Online Demo] - Tag cloud/Wordle presentation on 2D canvas or HTML.

  • chartist-js [Online Demo] - Simple responsive charts.

  • charts [Online Demo] - Simple, responsive, modern SVG Charts with zero dependencies.

  • flot [Online Demo] - Attractive JavaScript charts for jQuery.

  • apexcharts.js [Online Demo] - 📊 Interactive JavaScript Charts built on SVG.

  • plotly.js [Online Demo] - 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 [Online Demo] - Data Visualization Components.

  • vega [Online Demo] - A visualization grammar.

  • heatmap.js - 🔥 JavaScript Library for HTML5 canvas based heatmaps.

  • zeu [Online Demo] - 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 [Online Demo] - 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 [Online Demo] - Financial lightweight charts built with HTML5 canvas.

Poster and Screenshot

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 [Online Demo] - Translates HTML5 Canvas draw commands to SVG
  • canvg [Online Demo] - Javascript SVG parser and renderer on Canvas.

Image processing

  • tui.image-editor [Online Demo] - 🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
  • merge-images - Easily compose images together without messing around with canvas.
  • we-cropper [Online Demo] - Wechat miniapp image cutting tool.
  • miniPaint [Online Demo] - online image editor.
  • animockup [Online Demo] - Create animated mockups in the browser 🔥
  • vintageJS - Add a retro/vintage effect to images using the HTML5 canvas element.
  • glitch-canvas [Online Demo] - glitch your canvas element.
  • JIC [Online Demo] - 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!).
  • context-blender - Photoshop-style blend modes for HTML Canvas Contexts.
  • 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.
  • fast-average-color [Online Demo] - 🍏🍊🍅 Fast Average Color.
  • mcanvas [Online Demo] - mcanvas is a image handler plugin that can easily merge, crop, compress, filter the image and export a image of base64 finally.

Image filters

Drawingboard

Signature pad

Waveforms animation

  • wavesurfer.js [Online Demo] - Navigable waveform built on Web Audio and Canvas.
  • waveforms - An interactive, explorable explanation about the peculiar magic of sound waves. [Online Demo]
  • siriwave [Online Demo] - The Apple® Siri wave-form replicated in a JS library.
  • waves [Online Demo] - Ocean Wave Simulation.
  • waveform-playlist [Online Demo] - 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.
  • wavedrom [Online Demo] - 🌊 Digital timing diagram rendering engine.

Particle animation

Path animation

Audio Video

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

cursor

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

Creativity

  • pts [Online Demo] - A library for visualization and creative-coding.

QR code

Verification code

Runtime

Others

  • paper.js [Online Demo] - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
  • react-canvas - High performance canvas rendering for React components
  • react-native-canvas - A Canvas component for React Native.
  • origamijs - Powerful and Lightweight Library to create using HTML5 Canvas

Resources Website

Plugins

  • canvas-confetti [Online Demo] - 🎉 on-demand confetti gun.
  • lucky-canvas [Online Demo] - 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.
  • CanvasInput [Online Demo] - HTML5 Canvas Text Input.
  • wind-js [Online Demo] - An demo animation of wind on a Canvas layer in the JSAPI.
  • curvejs [Online Demo] - Made curve a dancer in HTML5 canvas.
  • canvas-nest.js - ♋ Interactive Particle / Nest System With JavaScript and Canvas, no jQuery.
  • 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.
  • canvas demos
  • shape-shifter [Online Demo] - 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.
  • canvas-test - some cnavas demo.

Articles

Contributor

Thank the following people for their contributions to the project.

License

MIT