two.js
A renderer agnostic two-dimensional drawing api for the web
JavaScript library for drawing 2D shapes and animations in the browser using one set of instructions that works with SVG, Canvas, or WebGL without changing your code.
Two.js is a JavaScript library for drawing two-dimensional shapes and animations in a web browser. The core idea is that you write one set of drawing instructions and Two.js handles the actual rendering in whichever technology you choose: SVG (the vector format browsers use natively), HTML5 Canvas, or WebGL (the GPU-accelerated graphics layer). Switching between those three output modes does not require changing your drawing code.
To use it, you include the library in an HTML page, create a Two instance, and then use its methods to make shapes. The README shows a short example where a rectangle is drawn in the center of the screen and then rotated slightly on every frame, producing a spinning animation. The library manages the animation loop for you; you just write what should change on each frame.
The library can also run on a server (outside of a browser) using a companion package called Node Canvas. In that mode, you can use the same drawing API to produce image files, which is useful for generating graphics automatically without a browser involved.
Two.js can be installed from npm, downloaded as a single prebuilt file, or compiled from source if you want a smaller file by including only the renderers you need. As of version 0.7.5 it supports ES6 module imports, so it fits into modern JavaScript build setups using tools like webpack or esbuild, as well as frameworks like React.
The project has been maintained since 2012. Its documentation lives on a companion website generated from the source code and from Markdown files in the repository. The library is available on npm under the name two.js.
Where it fits
- Build an animated logo or interactive graphic for a website without learning separate SVG or Canvas APIs.
- Add a spinning or bouncing animation to a React component using the ES6 module import.
- Generate PNG image files on a server with Node.js using the same drawing code that runs in the browser.
- Prototype a 2D visualization that can switch between SVG and WebGL rendering without rewriting drawing logic.