Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Path2D
✓ import { Path2D } from 'path2d';
✗ const Path2D = require('path2d'); // This is incorrect for named exports if not destructured
Main class for creating Path2D objects. For CommonJS, use `const { Path2D } = require('path2d');`.
applyPath2DToCanvasRenderingContext
✓ import { applyPath2DToCanvasRenderingContext } from 'path2d';
✗ import applyPath2DToCanvasRenderingContext from 'path2d'; // Not a default export
This function extends a CanvasRenderingContext prototype (e.g., from `node-canvas`) with Path2D features.
applyRoundRectToCanvasRenderingContext2D
✓ import { applyRoundRectToCanvasRenderingContext2D } from 'path2d';
This function extends a CanvasRenderingContext2D prototype with the `roundRect` method. Can be used independently or alongside `applyPath2DToCanvasRenderingContext`.
parsePath
✓ import { parsePath } from 'path2d';
Utility function for parsing SVG path strings into canvas commands, useful for custom implementations.
Demonstrates how to apply Path2D and roundRect polyfills to a CanvasRenderingContext2D (from `node-canvas` or a similar implementation) and then use them to draw shapes.
import { createCanvas } from 'canvas';
import { Path2D, applyPath2DToCanvasRenderingContext, applyRoundRectToCanvasRenderingContext2D } from 'path2d';
// Create a mock CanvasRenderingContext2D to apply the polyfills
// In a real scenario, this would be `CanvasRenderingContext2D` from 'canvas'
class MockCanvasRenderingContext2D {
constructor() {
this.calls = [];
}
beginPath() { this.calls.push('beginPath'); }
moveTo(x, y) { this.calls.push(`moveTo(${x},${y})`); }
lineTo(x, y) { this.calls.push(`lineTo(${x},${y})`); }
arc(x, y, r, sa, ea) { this.calls.push(`arc(${x},${y},${r})`); }
closePath() { this.calls.push('closePath'); }
fill(path) { this.calls.push(`fill(${path instanceof Path2D ? 'Path2D' : 'currentPath'})`); }
stroke(path) { this.calls.push(`stroke(${path instanceof Path2D ? 'Path2D' : 'currentPath'})`); }
}
// Apply Path2D and roundRect polyfills to the mock context
applyPath2DToCanvasRenderingContext(MockCanvasRenderingContext2D);
applyRoundRectToCanvasRenderingContext2D(MockCanvasRenderingContext2D);
// Example using node-canvas (uncomment and install 'canvas' to run)
// const { createCanvas, CanvasRenderingContext2D } = require('canvas');
// applyPath2DToCanvasRenderingContext(CanvasRenderingContext2D);
// applyRoundRectToCanvasRenderingContext2D(CanvasRenderingContext2D);
// const canvas = createCanvas(400, 300);
// const ctx = canvas.getContext('2d');
const ctx = new MockCanvasRenderingContext2D(); // Using mock for independent demonstration
ctx.fillStyle = 'blue';
// Create a Path2D object from an SVG string
const svgPath = new Path2D('M10 10 H100 V100 H10 L10 10');
ctx.fill(svgPath);
// Draw a rounded rectangle using the polyfilled method
ctx.beginPath();
ctx.roundRect(150, 50, 100, 75, 10);
ctx.fillStyle = 'red';
ctx.fill();
console.log('Path2D and roundRect polyfills applied.');
console.log('Context calls:', ctx.calls);
// If using node-canvas, you could then save the output:
// import { writeFileSync } from 'fs';
// writeFileSync('./output.png', canvas.toBuffer('image/png'));
Errors
Common errors & fixes
TypeError: Path2D is not a constructor
The `Path2D` class was not imported or destructured correctly, or the `applyPath2DToCanvasRenderingContext` function was not called on the `CanvasRenderingContext2D` prototype.
fixEnsure `import { Path2D, applyPath2DToCanvasRenderingContext } from 'path2d';` is used, and `applyPath2DToCanvasRenderingContext(CanvasRenderingContext2D);` has been executed for your context. TypeError: ctx.roundRect is not a function
The `roundRect` method was not applied to the `CanvasRenderingContext2D` prototype.
fixCall `applyRoundRectToCanvasRenderingContext2D(CanvasRenderingContext2D);` after importing, and before attempting to use `ctx.roundRect`.
ReferenceError: createCanvas is not defined
This error typically occurs when using the `node-canvas` library without properly importing or installing it.
fixInstall `canvas` via `npm install canvas` and ensure you are importing `createCanvas` from it: `import { createCanvas } from 'canvas';` (ESM) or `const { createCanvas } = require('canvas');` (CJS). Audit
Dependencies
No dependency data recorded yet.