javascript canvas library

[AskJS] What is the best canvas library to make an app like figma or integromat?

reddit.com › r › javascript › comments › pdib99 › askjs_what_is_the_best_canvas_library_to_make_an

None, figma is built with wasm + complex canvas manipulations, you won't find the advanced snapping feature in any js library Answer from s____s___ on reddit.com

Konva

konvajs.org

Konva - JavaScript Canvas 2d Library

Konva is 2d Canvas JavaScript framework for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more.

API Reference

Should Konva automatically update canvas on any changes.

Tutorials

Get started with Konva.js, the most popular 2D HTML5 Canvas JavaScript framework. Learn to draw shapes, handle events, drag-and-drop, and animate — with React, Vue, Svelte, and Angular support.

Demos

Interactive Konva Demos

React

react-konva is a JavaScript library for drawing complex canvas graphics using React.

reddit.com › r/javascript › [askjs] what is the best canvas library to make an app like figma or integromat?

r/javascript on Reddit: [AskJS] What is the best canvas library to make an app like figma or integromat?

August 28, 2021 -

I'm looking for a HTML5 canvas library to make an app like those, which one do you guys think would be the best for something like this?

Videos

youtube.com

JavaScript Game Tutorial with HTML Canvas

01:05:55

YouTube

Build an Advanced Drawing App with HTML, CSS & JavaScript - Canvas ...

November 26, 2024

588

m.youtube.com

Javascript Canvas Drawing Images - Part 4 - YouTube

September 14, 2022

youtube.com

HTML5 Canvas JavaScript Tutorial | Creating Objects + ...

57:19

YouTube

A More Inclusive Way to Learn Code - JavaScript on the Canvas rather ...

Fabric.js Javascript Library

Fabric provides interactive object model on top of canvas element Fabric also provide serialization and has SVG-to-canvas (and canvas-to-SVG) parser

MDN Web Docs

developer.mozilla.org › en-US › docs › Web › API › Canvas_API

Canvas API - Web APIs | MDN

Pts.js is a library for creative coding and visualization in canvas and SVG. Rekapi is an animation key-framing API for Canvas. Scrawl-canvas is an open-source JavaScript library for creating and manipulating 2D canvas elements.

Medium

drabstract.medium.com › your-guide-to-selecting-a-javascript-canvas-library-or-framework-3584f4512a30

Selecting a JavaScript Canvas Library or Framework | by Dr Abstract | Medium

September 28, 2022 - Pixi.js a 2D canvas / WebGL rendering engine with a BOM and events ... CreateJS at http://createjs.com is “a JavaScript library that makes working with the HTML5 Canvas element easy.

CanvasJS

canvasjs.com › home

Beautiful JavaScript Charting Library with 10x Performance

September 12, 2025 - HTML5 JavaScript Charting Library with a Simple API. Renders across devices & is 10x faster than SVG Charts. Examples include source code

Find elsewhere

Google Bing Mojeek

W3Schools

w3schools.com › html › html5_canvas.asp

HTML Canvas

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

Envato Tuts+

webdesign.tutsplus.com › home › web design › html/css › animation

Best Free Canvas Libraries in JavaScript | Envato Tuts+

June 24, 2021 - Paper.js is an open-source JavaScript-based library that gives you the tools to create amazing graphics on the canvas. The library gives you the option to use its own version of JavaScript, called PaperScript.

Createjs

createjs.com › easeljs

EaselJS | A JavaScript library that makes working with the ...

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

GitHub

github.com › raphamorim › awesome-canvas

GitHub - raphamorim/awesome-canvas: A curated list of awesome HTML5 Canvas with examples, related articles and posts. · GitHub

Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. Origami.js - JS Lib to redesign canvas API interface · p5.js - p5.js is a JS client-side library for creating graphic and interactive experiences

Starred by 1.8K users

Forked by 160 users

Languages Markdown

d3js.org

D3 by Observable | The JavaScript library for bespoke data visualization

The JavaScript library for bespoke data visualization

DEV Community

dev.to › lico › react-comparison-of-js-canvas-libraries-konvajs-vs-fabricjs-1dan

React: Comparison of JS Canvas Libraries (Konvajs vs Fabricjs) - DEV Community

November 14, 2022 - Fabric.js - is a powerful and simple Javascrript HTML5 canvas library · Konvajs - is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

SitePoint

sitepoint.com › blog › javascript › 10 cool javascript drawing and canvas libraries

10 Cool JavaScript Drawing and Canvas Libraries — SitePoint

February 13, 2024 - Create drawings and diagrams with the free JavaScript library. The User interface allows interactive drawing by using your standard browser. No additional software and no third party plug ins. Just run it and use it. ... 10.Canvas Query use HTML5 Canvas like jQuery extended canvas for gamedevelopers easy setup for a game loop, rendering loop, mouse, touch and keyboard

W3Schools

w3schools.com › jsref › api_canvas.asp

Canvas API

The Canvas API allows JavaScript to draw graphics on the canvas.

Hertzen

html2canvas.hertzen.com

html2canvas - Screenshots with JavaScript

html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });

Stack Overflow

stackoverflow.com › questions › 7996924 › html5-framework-library-for-drag-and-drop-on-canvas

javascript - HTML5: Framework/Library for Drag-and-Drop on Canvas - Stack Overflow

Top answer

1 of 5

A great library that emulates objects with drag/drop, resize, rotate. It can also import SVG data which can help you with importing vector graphics.

The library is called fabric.js: https://github.com/kangax/fabric.js

You can see some demos and feel how it can suit you: http://kangax.github.com/fabric.js/demos/index.html

2 of 5

I don't have a library to suggest, but a technique that I've used is to add an invisible imagemap over the canvas. I then added area elements that correspond with the objects on the canvas.

Area tags react to all of the browser's native mouse events. This let you provide rich user interaction. Imagemaps are also supported by every mobile and desktop browser and performs better than any point-in-polygon algorithm implemented in javascript.

Ensuring that the area elements in the imagemap always line up with the objects show in the canvas does add some code complexity, but in practice it's not too difficult to overcome. Note, in Chrome you might run into some issues if you to change the coordinates of an area tag that's already in the DOM.

Here's a working example of this techinque: http://xavi.co/drag-shapes
And here's the code: https://github.com/Xavi-/Drag-Shapes

Hope this help.

GitHub

github.com › konvajs › konva

GitHub - konvajs/konva: Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. · GitHub

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

Starred by 14.3K users

Forked by 1K users

Languages TypeScript 97.3% | HTML 1.8%

Three.js

threejs.org

Three.js – JavaScript 3D library

three.js r183 · docs examples · Learn · examples · documentation · Tools · devtools · editor · Community · questions

Crunchify

crunchify.com › javascript jquery tutorials › my favorite 5 javascript canvas libraries – html5

My Favorite 5 JavaScript Canvas Libraries - HTML5 • Crunchify

December 22, 2020 - Fabric.js is a powerful and simple Javascript canvas library. Fabric provides interactive object model on top of canvas element.

Cytoscape

js.cytoscape.org

Cytoscape.js

Permissive open source license (MIT) for the core Cytoscape.js library and all first-party extensions · Used in commercial projects and open-source projects in production · Designed for users first, for both frontfacing app usecases and developer usecases ... ES5 and canvas support are required, and feature detection is used for optional performance enhancements.