path2d

path2d

Implements Path2D api and roundRect for CanvasRenderingContext2D

Usage

npm install --save path2d

Use in a node environment

The package exports a few functions that can be used in a node environment:

• Path2D - class to create Path2D objects used by the polyfill methods
• parsePath - function for parsing an SVG path string into canvas commands
• 'roundRect' - implementation of roundRect using canvas commands
• applyPath2DToCanvasRenderingContext - Adds Path2D functions (if needed) to a CanvasRenderingContext and augments the fill, stroke and clip command
• applyRoundRectToCanvasRenderingContext2D - Adds roundRect function (if needed) to a CanvasRenderingContext

import { Path2D } from "path2d";

usage with node-canvas

To get Path2D features with the node-canvas library use the following pattern:

const { createCanvas, CanvasRenderingContext2D } = require("canvas");
const { applyPath2DToCanvasRenderingContext, Path2D } = require("path2d");

applyPath2DToCanvasRenderingContext(CanvasRenderingContext2D);
// Path2D features has now been added to CanvasRenderingContext2D

const canvas = createCanvas(200, 200);
const ctx = canvas.getContext("2d");

const p = new Path2D("M10 10 l 20 0 l 0 20 Z");
ctx.fillStyle = "green";
ctx.fill(p);

A working example of a node express server that serves an image drawn with canvas can be seen here

Support table

Method	Supported
constructor(SVGPath)	Yes
addPath()	Yes
closePath()	Yes
moveTo()	Yes
lineTo()	Yes
bezierCurveTo()	Yes
quadraticCurveTo()	Yes
arc()	Yes
ellipse()	Yes
rect()	Yes
roundRect()	Yes

See it in action

Clone path2d-polyfill

pnpm install
pnpm dev

open http://localhost:5173/ to see the example page.

Contributing

Recommended to use vscode with the prettier extension to keep formatting intact.