TypeScript port of Angus Johnson's Clipper2 library for polygon clipping, offsetting, and triangulation

npm install clipper2-ts

import { Clipper, FillRule, JoinType, EndType } from 'clipper2-ts';

// Define polygons as arrays of points
const subject = [[
  { x: 0, y: 0 },
  { x: 100, y: 0 },
  { x: 100, y: 100 },
  { x: 0, y: 100 }
]];

const clip = [[
  { x: 50, y: 50 },
  { x: 150, y: 50 },
  { x: 150, y: 150 },
  { x: 50, y: 150 }
]];

// Boolean operations
const intersection = Clipper.intersect(subject, clip, FillRule.NonZero);
const union = Clipper.union(subject, clip, FillRule.NonZero);
const difference = Clipper.difference(subject, clip, FillRule.NonZero);
const xor = Clipper.xor(subject, clip, FillRule.NonZero);

// Polygon offsetting (inflate/deflate)
const offset = Clipper.inflatePaths(subject, 10, JoinType.Round, EndType.Polygon);

Convert polygons into triangles using constrained Delaunay triangulation:

import { Clipper, TriangulateResult } from 'clipper2-ts';

const polygon = [[
  { x: 0, y: 0 },
  { x: 100, y: 0 },
  { x: 100, y: 100 },
  { x: 0, y: 100 }
]];

const { result, solution } = Clipper.triangulate(polygon);
if (result === TriangulateResult.success) {
  // solution contains triangles (each with 3 vertices)
  console.log(`Created ${solution.length} triangles`);
}

// For floating-point coordinates:
const { result: resultD, solution: solutionD } = Clipper.triangulateD(polygon, 2);

Points can optionally carry a Z value (e.g., elevation, layer index, color). Z callbacks allow you to assign Z values to new vertices created at intersection points. See Clipper2 Z Docs for details

Try the interactive example showing all Clipper2 operations

To run locally:

npm install
npm run serve
# Then open http://localhost:3000/example/

This port follows the structure and functionality of Clipper2's C# implementation, with method names adapted to JavaScript conventions. Where C# uses PascalCase for methods (AddPath, Execute), this port uses camelCase (addPath, execute). Class names remain unchanged

For detailed API documentation, see the official Clipper2 docs

The port includes 258 tests validating against Clipper2's reference test suite:

npm test              # Run all tests
npm test:coverage     # Run with coverage report

The test suite validates clipping, offsetting, triangulation, and Z-callbacks against Clipper2's reference implementation. Polygon test 16 (bow-tie) uses relaxed tolerances as this edge case also fails in the C# reference

Faster than JavaScript-based Clipper (Clipper1) ports, slower than Clipper2-WASM; choose based on your contraints

Boost Software License 1.0 (same as Clipper2)

Original library by Angus Johnson. TypeScript port maintained by Jeremy Tribby