Polyfills Path2D api for rendering SVG paths in canvas
Use this to enable Path2D features in e.g. Internet Explorer.
npm install --save path2d-polyfill
include directly in html-page
<html>
<head>
...
</head>
<body>
<script lang="javascript" src='node_modules/path2d-polyfill/path2d-polyfill.js'></script>
</body>
</html>or import with module bundler e.g. webpack before you try to use the feature
require('path2d-polyfill');or if you use transpiler to support es2015+ modules
import 'path2d-polyfill';| Method | Supported |
|---|---|
| constructor(SVGPath) | Yes |
| addPath() | Yes |
| closePath() | Yes |
| moveTo() | Yes |
| lineTo() | Yes |
| bezierCurveTo() | Yes |
| quadraticCurveTo() | Yes |
| arc() | Yes |
| ellipse() | No |
| rect() | Yes |
You can render SVG paths like this
ctx.fill(new Path2D('M 80 80 A 45 45 0 0 0 125 125 L 125 80 Z'));
ctx.stroke(new Path2D('M 80 80 A 45 45 0 0 0 125 125 L 125 80 Z'));Clone this repo and run the following
npm install
npm run example
open http://localhost:3000 to see the example page.