gitmyhub

two.js

JavaScript ★ 8.6k updated 7d ago

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.

JavaScriptSVGCanvasWebGLNode.jssetup: easycomplexity 2/5

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