JSPM

  • Created
  • Published
  • Downloads 741033
  • Score
    100M100P100Q191663F
  • License MIT

Polyfills Path2D api for canvas rendering

Package Exports

  • path2d-polyfill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (path2d-polyfill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

path2d-polyfill

CircleCI

Polyfills Path2D api for rendering SVG paths in canvas

Use this to enable Path2D features in e.g. Internet Explorer.

Usage

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';

Support table

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'));

See it in action

Clone this repo and run the following

npm install
npm run example

open http://localhost:3000 to see the example page.