{"library":"path2d-polyfill","title":"Path2D and roundRect Canvas Polyfill","description":"path2d-polyfill is a JavaScript library designed to provide comprehensive polyfills for the Canvas API's `Path2D` interface and the `CanvasRenderingContext2D.roundRect` method in environments where they are natively unsupported. Its primary function is to extend the global `window` object, making these modern canvas features available across a wider range of browsers, ensuring consistent rendering. The current stable version is 3.2.1. Releases appear to follow an on-demand cadence, often co-releasing with its internal `path2d` dependency, indicating active maintenance. Key differentiators include comprehensive support for various `Path2D` methods (such as `arc`, `ellipse`, `bezierCurveTo`), and advanced `roundRect` functionality, including support for `DOMPoint` objects or arrays of radii for elliptical and mixed corners, which was introduced in version 3.2.0. This makes it a crucial tool for simplifying canvas development by abstracting away browser inconsistencies for advanced shape drawing.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install path2d-polyfill"],"cli":null},"imports":["<script src=\"https://cdn.jsdelivr.net/npm/path2d-polyfill/dist/path2d-polyfill.min.js\"></script>","ctx.roundRect(x, y, width, height, radii);"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<!-- Include the polyfill script in your HTML -->\n<script lang=\"javascript\" src=\"https://cdn.jsdelivr.net/npm/path2d-polyfill/dist/path2d-polyfill.min.js\"></script>\n\n<!-- Your canvas element -->\n<canvas id=\"myCanvas\" width=\"400\" height=\"200\" style=\"border:1px solid #000;\"></canvas>\n\n<script type=\"text/javascript\">\n  const canvas = document.getElementById('myCanvas');\n  const ctx = canvas.getContext('2d');\n\n  if (ctx) {\n    // Example 1: Using Path2D with an SVG path string\n    ctx.strokeStyle = 'red';\n    ctx.stroke(new Path2D(\"M 80 80 A 45 45 0 0 0 125 125 L 125 80 Z\"));\n\n    // Example 2: Using Path2D.roundRect with elliptical corners\n    const path = new Path2D();\n    path.roundRect(10, 10, 100, 60, { x: 20, y: 10 }); // Elliptical corners\n    ctx.strokeStyle = 'blue';\n    ctx.stroke(path);\n\n    // Example 3: Using Path2D.roundRect with mixed corner types\n    const path2 = new Path2D();\n    path2.roundRect(10, 80, 100, 60, [{ x: 15, y: 5 }, 10, { x: 5, y: 15 }, 8]);\n    ctx.strokeStyle = 'green';\n    ctx.stroke(path2);\n\n    // Example 4: Using ctx.roundRect directly\n    ctx.beginPath();\n    ctx.roundRect(150, 10, 100, 60, 15); // Uniform radius\n    ctx.fillStyle = 'purple';\n    ctx.fill();\n    ctx.closePath();\n\n  } else {\n    console.error('Canvas not supported or context not available.');\n  }\n</script>","lang":"javascript","description":"This quickstart demonstrates how to include the `path2d-polyfill` via a script tag and utilize the polyfilled `Path2D` constructor and `roundRect` methods on both `Path2D` instances and the `CanvasRenderingContext2D` itself, showcasing various corner radius configurations.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}