JavaScript Drawing and Canvas Libraries

Two.js is a multi-backend graphics engine and vector drawing library that provides a unified API for creating two-dimensional graphics and animations. It functions as a renderer-agnostic abstraction layer, allowing users to generate vector shapes and paths that can be rendered via SVG, Canvas2D, or WebGL. The engine includes a scene graph manager to organize objects into hierarchical groups, enabling the propagation of collective transformations and parent-child relationships. It also features a headless graphics renderer, providing a node-based implementation for generating 2D drawings in se

EaselJS is a JavaScript library for creating interactive 2D graphics and animations using the HTML5 Canvas element. It functions as a 2D animation framework, a canvas scene graph manager, and an interaction wrapper for detecting and responding to mouse and touch events. The library features a rendering pipeline that utilizes WebGL to increase the drawing performance of bitmap and cached content. It organizes visual elements into a hierarchical display list, allowing nested groups of 2D graphics objects to be transformed and animated as single units. Its capabilities cover the rendering of ve

p5.js is a JavaScript creative coding library and generative art framework. It serves as a web-based graphics engine and a high-level HTML5 Canvas wrapper designed to produce algorithmic imagery and responsive audio-visual experiences. The project provides a simplified sketching API for rendering 2D and 3D graphics directly in a web browser. It enables the creation of interactive animations, generative art, and digital experiences that respond to user input. The library covers a range of applications including interactive data visualization, browser-based multimedia art, and educational prog

This project is a high-level 3D graphics engine designed to render complex, hardware-accelerated environments within web browsers. It provides a comprehensive abstraction layer that manages scene graphs, cameras, and lighting, mapping high-level scene definitions onto low-level graphics APIs. By decoupling these definitions from specific hardware targets, the engine ensures consistent performance across diverse browsers and devices. The framework distinguishes itself through a robust architecture that includes a unified math library for high-frequency spatial calculations and a physically bas

Paper.js is an HTML5 Canvas vector graphics library and scripting framework used for creating and manipulating 2D shapes and paths. It functions as a vector animation framework and a headless vector graphics engine, allowing for the execution of graphics operations in both browser and server-side environments. The project features a dedicated SVG import and export engine to convert between native vector items and the SVG format. It includes a specialized boolean path operation toolkit for uniting, subtracting, and intersecting vector paths to create complex geometric shapes. The library cove

Pixi.js is a high-performance 2D graphics engine used to render interactive animations, sprites, and visual effects in web browsers. It functions as a WebGL 2D rendering engine and HTML5 graphics library designed to produce high-performance two-dimensional visuals. The project operates as a 2D sprite framework and a web-based visual effects engine, providing tools to apply filters, blend modes, and masks to real-time graphics. It also serves as an interactive web canvas API for handling multi-touch and mouse input to build responsive graphical user interfaces. The framework covers a broad se

mxgraph is a client-side graph visualization tool and JavaScript diagramming library. It functions as an SVG-based drawing framework used to create and render interactive diagrams directly within a web browser. The library enables the development of custom diagramming tools, such as network maps and flowcharts, by providing the means to draw and manipulate visual data structures. It focuses on client-side data visualization, allowing for the representation of complex node and edge relationships without requiring server-side rendering.

ogl is a WebGL graphics library and 3D scene graph engine designed for rendering three-dimensional scenes. It provides a lightweight framework for managing geometries and coordinating spatial transformations within a hierarchical system. The project includes a PBR shader system for creating realistic materials and a GPGPU computation framework for performing large-scale general-purpose calculations and particle simulations on the graphics processor. It also features a post-processing suite for applying visual filters to rendered scenes via frame buffers. The library covers broader capabiliti

PixiJS is a hardware-accelerated 2D rendering engine and HTML5 canvas library. It functions as a web-based graphics engine that utilizes WebGL to draw interactive digital content, shapes, text, and images in the browser. The engine provides a specialized pipeline for high-performance 2D graphics, featuring a scene-graph hierarchy for organizing visual objects and a system for dynamic texture management. It includes capabilities for applying visual effects through masks, filters, and blend modes. The project covers broad functional areas including digital asset loading, user input processing

Rough is a graphics library designed to render shapes and paths with a hand-drawn, sketchy aesthetic on web pages. It functions as a generator for informal visual styles, allowing developers to create illustrations and diagrams that mimic the appearance of human-drawn sketches. The library distinguishes itself by using procedural rendering to calculate randomized offsets for lines and curves, simulating natural imperfections. It employs deterministic seeding to ensure that these variations remain consistent across renders, while providing hachure-based texture filling to apply stylized shadin

Konva is an object-oriented HTML5 canvas framework designed for building interactive 2D graphical applications. It provides a hierarchical scene graph that organizes shapes, images, and text into manageable nodes, groups, and layers. By mapping application state to canvas elements, the library enables developers to create complex visual interfaces using declarative patterns that synchronize with modern component-based frameworks. The library distinguishes itself through a robust event system that supports hit detection, bubbling, and direct manipulation of graphical objects, such as dragging,

ECharts is a JavaScript data visualization library and web charting framework used to render interactive 2D and 3D data plots within a web browser. It functions as a visualization engine that transforms raw data into customizable charts and graphs. The project includes a WebGL-based hardware acceleration engine specifically for producing three-dimensional plots and globe visualizations. This allows the library to handle large and complex datasets through GPU-accelerated rendering. The framework supports both canvas-based raster rendering and SVG-based vector rendering. It provides capabiliti

This project is a React-based WebGL renderer that enables the creation of three-dimensional scenes using a declarative, component-driven architecture. It functions as a bridge between a component-based user interface library and a low-level graphics engine, allowing developers to manage lights, cameras, and geometry as standard elements within a reactive tree structure. The library distinguishes itself by treating the scene graph as a declarative hierarchy that synchronizes directly with application state and lifecycle events. It utilizes a custom reconciler to map component updates to object

Apache ECharts is a JavaScript data visualization library used for rendering interactive charts and complex data visualizations in web browsers. It functions as a canvas-based charting engine and a statistical data visualization suite that transforms datasets into visual representations. The framework provides specialized capabilities for three-dimensional data visualization, including the generation of 3D plots and globe visualizations. It also serves as a web-based geographic mapping tool for overlaying heatmaps, routes, and data distributions onto interactive maps. The library covers a br

Fabric.js is an object-oriented canvas library that provides an interactive framework for managing shapes, images, and text within an HTML5 canvas environment. It abstracts raw pixel-based drawing commands into a structured hierarchy of objects, enabling developers to manipulate, transform, and animate elements through a centralized event-driven system. The library distinguishes itself by offering comprehensive state serialization, allowing complex graphic compositions to be converted into JSON or SVG formats for persistent storage and reconstruction. It includes a built-in SVG parser that co

Zdog is a JavaScript graphics library designed for rendering pseudo-three-dimensional geometric models within web browser environments. It functions as a lightweight engine that draws flat, vector-based shapes onto HTML5 canvas or SVG elements by utilizing a scene graph to manage object relationships and spatial transformations. The library distinguishes itself through a unique approach to volumetric modeling, where three-dimensional depth is simulated on flat shapes by dynamically adjusting stroke thickness. This technique allows for the creation of rounded, plump visual effects without the

react-konva is a declarative React canvas graphics library and 2D vector graphics framework. It serves as a rendering engine and interactive canvas toolset that allows for the drawing and management of complex 2D shapes and graphics using a React component model. The library maps reactive component trees to an underlying object-oriented graphics scene graph, enabling the synchronization of visual states with application data. It provides specialized tools for building interactive graphical interfaces, including support for multi-touch gestures, drag-and-drop functionality, and real-time trans

This project is a declarative animation library and high-performance engine designed for creating fluid, interactive vector motion graphics on the web. It provides a specialized framework for defining, rendering, and orchestrating complex visual sequences, including custom geometric shapes and dynamic property transitions. The library distinguishes itself through a robust particle system framework that generates explosive or organic visual effects by emitting multiple shapes with randomized trajectories and paths. It utilizes a master timeline controller to synchronize independent animation i

PixiJS is a high-performance 2D rendering engine designed for building interactive visual content and browser-based games. It provides a hardware-accelerated graphics library that leverages WebGL and WebGPU backends to execute complex scenes, utilizing a hierarchical scene graph to manage object transformations and display order. The project distinguishes itself through a sophisticated architecture that decouples rendering logic from hardware APIs, allowing for consistent performance across diverse browser environments. It features a robust, asynchronous asset pipeline that handles loading, c

Hilo is an HTML5 game engine for building 2D games that run across browsers and devices. It renders graphics through Canvas, DOM, or WebGL backends, automatically selecting the best option for the target environment. The engine provides a complete game development solution with sprite, skeletal, and particle animation, along with a texture atlas system for efficient image loading and rendering. The framework distinguishes itself through its integration of the DragonBones skeletal animation engine, which drives bone-based character movement without frame-by-frame sprites, and its Chipmunk phys

Spritejs is a graphics library and cross-platform 2D graphics engine designed for rendering geometric shapes and sprites across web, desktop, and mobile environments. It functions as a canvas-based sprite framework that manages elements using a document object model for positioning and styling. The project provides a web worker rendering engine that distributes graphic layers to offscreen canvases, preventing main thread blocking. It also includes a server-side graphics generator for producing visual elements and images in non-browser environments. The toolkit covers a broad range of graphic

Phaser is a comprehensive 2D game engine designed for building high-performance, interactive content that runs directly in web browsers. At its core, the engine utilizes a fixed-timestep simulation loop that decouples game logic from variable browser frame rates, ensuring consistent behavior across diverse hardware. It provides a robust framework for managing asset loading, physics, input, and audio, enabling the creation of complex, responsive visual experiences for both desktop and mobile devices. The engine distinguishes itself through a high-performance graphics pipeline that automaticall

This project is a declarative visualization library and geospatial framework designed for rendering large-scale data sets within web browsers. It functions as a high-performance graphics engine that leverages hardware acceleration to display complex 2D and 3D visual layers, enabling the visualization of millions of data points through a structured, component-based syntax. The framework distinguishes itself through its ability to synchronize custom data visualizations with third-party mapping platforms. By managing camera states and coordinate systems, it allows developers to overlay high-perf

Leafer UI is a high-performance HTML5 canvas rendering engine and 2D vector graphics library. It utilizes a hierarchical scene tree to manage shapes, paths, and text, providing a toolkit for building interactive canvas applications and expansive infinite canvases. The engine is designed as a cross-platform canvas toolkit that decouples core logic from the drawing API, allowing it to run across web, mobile, server, and mini-program environments. It distinguishes itself by providing specialized tools for interactive graphic editor development, including hit detection, event bubbling, and transf

D3 is a modular library providing low-level primitives for creating data-driven visualizations. It functions as a flexible framework that allows for direct control over visual presentation by mapping abstract data dimensions to graphical properties, such as position, color, and size, without imposing predefined chart abstractions. The library distinguishes itself by offering specialized tools for complex data representation, including algorithmic layouts for hierarchical structures and geographic projection utilities for mapping spherical coordinates. It also includes a comprehensive suite fo

Phaser is a cross-platform 2D web game engine and framework designed for creating interactive experiences that run on desktop and mobile web browsers. It serves as a GPU-accelerated rendering library and WebGL graphics engine for building two-dimensional games using HTML5 Canvas and WebGL. The engine features a dual-backend rendering pipeline that allows developers to switch between rendering paths. It distinguishes itself through high-performance graphics capabilities, including GPU-driven sprite batching for large-scale image management, a dynamic lighting system with self-shadows, and the

canvas-sketch is a JavaScript generative art framework and web-based creative coding environment. It provides a system for creating browser-based generative artwork using built-in tools for geometry and randomness. The framework functions as a high-resolution print exporter and pen plotter vector generator, allowing users to design with physical units and DPI settings for archival printing and robotic drawing machines. It also serves as a GPU shader integration tool for loading and executing shader files to achieve hardware-accelerated rendering. The project includes a development workflow f

discord-badge: https://img.shields.io/discord/1195771303215513671?logo=discord&logoColor=white&label=Discord&color=blue discord-url: https://discord.gg/W6zUd4tTY3