path2d-polyfill

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 commans
• 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

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.

Current Tags

• 0.2.1                                ...           latest (2 years ago)

5 Versions

• 0.2.1                                ...           2 years ago
• 0.2.0                                ...           2 years ago
• 0.1.2                                ...           2 years ago
• 0.1.1                                ...           2 years ago
• 0.0.1                                ...           2 years ago