path2d-polyfill

Implements Path2D api and roundRect for CanvasRenderingContext2D

Usage

 npm install --save path2d

Use in a node environment

It is possible to use this library in a node environment as well. The package exports a few functions that can be used:

• 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 commans
• applyPath2DToCanvasRenderingContext - Adds Path2D functions (if needed) to a CanvasRenderingContext and augments the fill and stroke 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

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.