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

| 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.