Repolode
Submit
jonobr1

jonobr1/two.js

A renderer-agnostic 2D drawing API for the web that draws the same scene with WebGL, Canvas 2D, or SVG.

View on GitHubWebsite
Stars
8,699
Forks
468
Open issues
31
Last commit
5 days ago

What is it?

Two.js is a JavaScript library for creating two-dimensional graphics in modern browsers. You describe shapes, text and groups through one API, and the same scene can be rendered with WebGL, Canvas 2D or SVG without changing the drawing code.

The library is built around a scenegraph, so objects can be grouped, transformed and animated through a per-frame update loop. It can be included as a minified build via a script tag, installed from npm, or imported as ES6 modules in bundler-based projects such as React or webpack.

Two.js can also run headless on Node.js by pairing it with the node-canvas package, which lets you render a scene and save it as a PNG file on a server.

Key features

  • 01Renders the same scene through WebGL, Canvas 2D or SVG.
  • 02Provides a scenegraph with groups, transforms and per-frame updates.
  • 03Ships as a script-tag build, an npm package and ES6 modules.
  • 04Supports headless rendering on Node.js via node-canvas.
  • 05Lets you build custom builds that include only the renderers you need.

Use cases

  • Creating interactive 2D animations or motion graphics for the web.
  • Drawing vector illustrations that need to switch between SVG and canvas output.
  • Generating PNG images of 2D scenes on a server.
  • Adding lightweight 2D graphics to React or other bundler-based front-end apps.

Quick start

  1. 1

    Install via npm

    npm install --save two.js
  2. 2

    Include the minified library in your HTML

    <script src="js/two.min.js"></script>

Things to know

  • Full library imports all modules, so there is no tree shaking yet.

Topics

#2d-graphics#canvas#svg#webgl#animation#scenegraph#javascript#vector-graphics#2d#bitmap-graphics

FAQ

What is two.js?
A renderer-agnostic 2D drawing API for the web that draws the same scene with WebGL, Canvas 2D, or SVG. Two.js is a JavaScript library for creating two-dimensional graphics in modern browsers. You describe shapes, text and groups through one API, and the same scene can be rendered with WebGL, Canvas 2D or SVG without changing the drawing code.
Is two.js free to use? What license does it have?
two.js is open source under the MIT license. Check the license terms before using it in commercial products.
Is two.js still maintained?
Actively maintained. The last commit to two.js was on Nov 3, 2026.
What can I use two.js for?
Creating interactive 2D animations or motion graphics for the web. Drawing vector illustrations that need to switch between SVG and canvas output. Generating PNG images of 2D scenes on a server. Adding lightweight 2D graphics to React or other bundler-based front-end apps.
How do I install two.js?
Install via npm: npm install --save two.js Include the minified library in your HTML: <script src="js/two.min.js"></script>
Where can I get two.js?
The source code and installation instructions are on GitHub: https://github.com/jonobr1/two.js

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects