{"library":"path2d","title":"Path2D API for Node.js Canvas","description":"This `path2d` package provides a server-side implementation of the standard browser `Path2D` API, along with `CanvasRenderingContext2D.roundRect()`, for use in Node.js environments. It enables developers to utilize modern Canvas Path2D features and methods like `arc()`, `ellipse()`, and `roundRect()` when performing server-side rendering with libraries such as `node-canvas`. The current stable version is `0.3.1`, and updates appear to be released on an as-needed basis for feature enhancements (e.g., `DomPoints` support for `roundRect`) and dependency maintenance. Its primary differentiation is bringing browser-standard canvas path construction to Node.js, ensuring consistent rendering logic across client and server-side contexts for applications that generate images programmatically.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install path2d"],"cli":null},"imports":["import { Path2D } from 'path2d';","import { applyPath2DToCanvasRenderingContext } from 'path2d';","import { applyRoundRectToCanvasRenderingContext2D } from 'path2d';","import { parsePath } from 'path2d';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createCanvas } from 'canvas';\nimport { Path2D, applyPath2DToCanvasRenderingContext, applyRoundRectToCanvasRenderingContext2D } from 'path2d';\n\n// Create a mock CanvasRenderingContext2D to apply the polyfills\n// In a real scenario, this would be `CanvasRenderingContext2D` from 'canvas'\nclass MockCanvasRenderingContext2D {\n  constructor() {\n    this.calls = [];\n  }\n  beginPath() { this.calls.push('beginPath'); }\n  moveTo(x, y) { this.calls.push(`moveTo(${x},${y})`); }\n  lineTo(x, y) { this.calls.push(`lineTo(${x},${y})`); }\n  arc(x, y, r, sa, ea) { this.calls.push(`arc(${x},${y},${r})`); }\n  closePath() { this.calls.push('closePath'); }\n  fill(path) { this.calls.push(`fill(${path instanceof Path2D ? 'Path2D' : 'currentPath'})`); }\n  stroke(path) { this.calls.push(`stroke(${path instanceof Path2D ? 'Path2D' : 'currentPath'})`); }\n}\n\n// Apply Path2D and roundRect polyfills to the mock context\napplyPath2DToCanvasRenderingContext(MockCanvasRenderingContext2D);\napplyRoundRectToCanvasRenderingContext2D(MockCanvasRenderingContext2D);\n\n// Example using node-canvas (uncomment and install 'canvas' to run)\n// const { createCanvas, CanvasRenderingContext2D } = require('canvas');\n// applyPath2DToCanvasRenderingContext(CanvasRenderingContext2D);\n// applyRoundRectToCanvasRenderingContext2D(CanvasRenderingContext2D);\n// const canvas = createCanvas(400, 300);\n// const ctx = canvas.getContext('2d');\n\nconst ctx = new MockCanvasRenderingContext2D(); // Using mock for independent demonstration\n\nctx.fillStyle = 'blue';\n\n// Create a Path2D object from an SVG string\nconst svgPath = new Path2D('M10 10 H100 V100 H10 L10 10');\nctx.fill(svgPath);\n\n// Draw a rounded rectangle using the polyfilled method\nctx.beginPath();\nctx.roundRect(150, 50, 100, 75, 10);\nctx.fillStyle = 'red';\nctx.fill();\n\nconsole.log('Path2D and roundRect polyfills applied.');\nconsole.log('Context calls:', ctx.calls);\n\n// If using node-canvas, you could then save the output:\n// import { writeFileSync } from 'fs';\n// writeFileSync('./output.png', canvas.toBuffer('image/png'));\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}