Two.js — Two-Dimensional Drawing API for the Web

Introduction

Two.js is a renderer-agnostic two-dimensional drawing API for JavaScript. It provides a single API surface that can render to SVG, HTML5 Canvas, or WebGL, letting developers switch renderers without rewriting drawing code. The library is well suited for interactive graphics, data visualization, and creative coding.

What Two.js Does

• Draws shapes, paths, text, and images through a unified API
• Renders to SVG, Canvas, or WebGL without changing application code
• Provides a built-in animation loop for smooth interactive graphics
• Supports grouping, transformations, gradients, and clipping masks
• Works in both browser and Node.js environments (with node-canvas)

Architecture Overview

Two.js maintains a scene graph of drawable objects. When you create shapes, they are added to the scene graph as nodes. On each render call, the library traverses the graph and delegates drawing to the selected renderer (SVG DOM manipulation, Canvas 2D context calls, or WebGL shader programs). The scene graph approach enables efficient updates since only changed nodes trigger re-rendering.

Self-Hosting & Configuration

• Install via npm with npm install two.js or include from a CDN
• Create a Two instance with width, height, and optional renderer type (svg, canvas, webgl)
• Append the renderer element to any DOM container
• Use two.play() for continuous animation or two.update() for single-frame rendering
• Configure resolution scaling via the ratio option for high-DPI displays

Key Features

• Renderer-agnostic API that swaps between SVG, Canvas, and WebGL at instantiation
• Scene graph with hierarchical grouping, transforms, and opacity inheritance
• Built-in animation loop with requestAnimationFrame timing
• Support for gradients (linear and radial), textures, and clipping paths
• Lightweight footprint with no external dependencies

Comparison with Similar Tools

• p5.js — creative coding focus with Canvas; Two.js adds SVG and WebGL as first-class outputs
• Fabric.js — interactive Canvas objects with editing; Two.js is renderer-agnostic
• Paper.js — vector graphics on Canvas with path operations; Two.js supports multiple renderers
• Konva — Canvas-based with event system and React bindings; Two.js offers SVG and WebGL options
• D3.js — data-driven DOM manipulation; Two.js provides a drawing-first API with animation built in

FAQ

Q: When should I choose SVG vs Canvas vs WebGL rendering? A: Use SVG for small scene counts where DOM interactivity matters, Canvas for moderate complexity, and WebGL for high-performance scenes with many objects.

Q: Can I use Two.js with React or Vue? A: Yes. Create a Two instance in a ref or lifecycle hook and append it to a container element. The library is framework-agnostic.

Q: Does Two.js support user interaction like click and hover? A: Two.js focuses on rendering. For interaction, attach DOM events to the SVG renderer output or use a hit-testing approach with the Canvas renderer.

Q: Is Two.js suitable for data visualization? A: Yes. Its shape primitives and scene graph work well for custom charts and diagrams where a full charting library is not needed.

Sources

• https://github.com/jonobr1/two.js
• https://two.js.org/