10 Best JavaScript Canvas Libraries

List hand-picked by Openbase Experts
Learn More

chart.js

Simple HTML5 Charts using the <canvas> tag

License: MIT

TypeScript Definitions: Built-In

29Great Documentation

Bundle Size (min+gzip)

N/A

Tree-Shakeable

tsparticles

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

ng-particles

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

html2canvas

Screenshots with JavaScript

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

fabric

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

signature_pad

HTML5 canvas based smooth signature drawing

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

ngx-lottie

Fully customizable Angular component for rendering After Effects animations. Compatible with Angular 9+ 🚀

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

gsap

GreenSock's GSAP JavaScript animation library (including Draggable).

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

x-data-spreadsheet

A web-based JavaScript（canvas） spreadsheet

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

tsparticles-core

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

react-konva

React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

vue-gl

Vue.js components rendering 3D WebGL graphics reactively with three.js

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

pikaso

Seamless and headless HTML5 Canvas library

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

dom-to-image

Generates an image from a DOM node using HTML5 canvas

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

@crello/react-lottie

React wrapper for Airbnb Lottie (lottie-web)

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

@terrylinla/react-native-sketch-canvas

A React Native component for drawing by touching on both iOS and Android.

License: MIT

TypeScript Definitions: Not Found

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

chart

Event-based Charting Canvas API

License: Unknown

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-canvas-draw

React Component for drawing in canvas

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Tree-Shakeable

ccapture.js

A library to capture canvas-based animations at a fixed framerate

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-canvas

High performance <canvas> rendering for React components

License: BSD-3-Clause

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-native-signature-canvas

✒️ React Native Signature Component based WebView Canvas for Android && IOS && expo

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-art

A declarative, efficient, and flexible JavaScript library for building user interfaces.

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-planner

✏️ A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Tree-Shakeable

canvg

Javascript SVG parser and renderer on Canvas

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

ng2-canvas-whiteboard

Canvas whiteboard

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

ng2-konva

Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

@workday/canvas-kit-react-common

Development kits to implement UI following the Workday Canvas Design System (https://design.workday.com). See our Component Storybook -

License: Apache-2.0

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

react-force-graph

React component for 2D, 3D, VR and AR force directed graphs

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

canvas-constructor

An ES6 utility for canvas with built-in functions and chained methods.

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-lineto

Draw a line between two elements in React

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

angular2-signaturepad

Angular2 Component for szimek / signature_pad

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

@flyskywhy/react-native-gcanvas

react native canvas based on gpu opengl glsl GCanvas -- A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎)

License: Apache-2.0

TypeScript Definitions: Not Found

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

vue-konva

Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-native-canvas

A Canvas component for React Native

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

@react-vertex/core

◾ React Vertex | Hooks-based WebGL library for React

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

vue-graph

⚡️ Vue components based on the JUI chart available in Vue.js

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad

License: Apache-2.0

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

@ion-phaser/core

A web component to use Phaser Framework with Angular, React, Vue, etc 🎮

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

paintablejs

This package lets you draw on a canvas.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

zimjs

ZIM JavaScript Canvas Framework - Code Creativity! Interactive Media For All.

License: ISC

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

223.5KB

Not Tree-Shakeable

@ngx-canvas/core

This is a Typescript Library that makes canvas intergrations easier!

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

vue-html2canvas

Vue mixin for Html2Canvas

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

vue-fabric-wrapper

Vue Fabric.js Wrapper

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

canvas-txt

The better way to render text on HTML5 Canvas

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

angular-signature

HTML5 canvas based smooth signature drawing as angularJS directive (http://szimek.github.io/signature_pad/)

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

react-native-signature-pad

React Native wrapper around szimek's Canvas based Signature Pad

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

vue-paintable

With this vue component you can add a paintable canvas through every page you like.

License: Unknown

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

angular-canvas

Angular canvas renderer with support DefaultDomRenderer.

License: MIT

TypeScript Definitions: Built-In

Bundle Size (min+gzip)

N/A

Tree-Shakeable

angular-canvas-painter

Angular.js directive to paint on a canvas on desktop or touch devices

License: MIT

TypeScript Definitions: DefinitelyTyped

Bundle Size (min+gzip)

N/A

Not Tree-Shakeable

10 Best JavaScript Canvas Libraries

List hand-picked by Openbase ExpertsLearn More

chart.js

Simple HTML5 Charts using the <canvas> tag

tsparticles

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

ng-particles

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

html2canvas

Screenshots with JavaScript

fabric

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

signature_pad

HTML5 canvas based smooth signature drawing

konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

ngx-lottie

Fully customizable Angular component for rendering After Effects animations. Compatible with Angular 9+ 🚀

gsap

GreenSock's GSAP JavaScript animation library (including Draggable).

x-data-spreadsheet

A web-based JavaScript（canvas） spreadsheet

tsparticles-core

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

react-konva

React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

vue-gl

Vue.js components rendering 3D WebGL graphics reactively with three.js

pikaso

Seamless and headless HTML5 Canvas library

dom-to-image

Generates an image from a DOM node using HTML5 canvas

@crello/react-lottie

React wrapper for Airbnb Lottie (lottie-web)

@terrylinla/react-native-sketch-canvas

A React Native component for drawing by touching on both iOS and Android.

chart

Event-based Charting Canvas API

react-canvas-draw

React Component for drawing in canvas

ccapture.js

A library to capture canvas-based animations at a fixed framerate

react-canvas

High performance <canvas> rendering for React components

react-native-signature-canvas

✒️ React Native Signature Component based WebView Canvas for Android && IOS && expo

react-art

A declarative, efficient, and flexible JavaScript library for building user interfaces.

react-planner

✏️ A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.

canvg

Javascript SVG parser and renderer on Canvas

ng2-canvas-whiteboard

Canvas whiteboard

ng2-konva

Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.

@workday/canvas-kit-react-common

Development kits to implement UI following the Workday Canvas Design System (https://design.workday.com). See our Component Storybook -

react-force-graph

React component for 2D, 3D, VR and AR force directed graphs

canvas-constructor

An ES6 utility for canvas with built-in functions and chained methods.

react-lineto

Draw a line between two elements in React

angular2-signaturepad

Angular2 Component for szimek / signature_pad

@flyskywhy/react-native-gcanvas

react native canvas based on gpu opengl glsl GCanvas -- A lightweight cross-platform graphics rendering engine. (超轻量的跨平台图形引擎)

vue-konva

Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.

react-native-canvas

A Canvas component for React Native

@react-vertex/core

◾ React Vertex | Hooks-based WebGL library for React

vue-graph

⚡️ Vue components based on the JUI chart available in Vue.js

react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad

@ion-phaser/core

A web component to use Phaser Framework with Angular, React, Vue, etc 🎮

List hand-picked by Openbase Experts
Learn More