Installations

npm install @hn3000/canvas-5-polyfill

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.7.0

NPM Version

7.20.3 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

2

JavaScript

Makefile

JavaScript (99.71%)

Makefile (0.29%)

Developer

hn3000

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

NOASSERTION License

39 Commits

1 Watchers

2 Branches

1 Contributors

Updated on Sep 20, 2021

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

0.1.5-hn3

Package Id

@hn3000/canvas-5-polyfill@0.1.5-hn3

Unpacked Size

177.59 kB

Size

24.60 kB

File Count

19

NPM Version

7.20.3

Node Version

16.7.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

18

chai karma karma-chai karma-chrome-launcher karma-coffee-preprocessor karma-firefox-launcher karma-html2js-preprocessor karma-ie-launcher karma-jasmine jasmine-core karma-mocha karma-phantomjs-launcher karma-safarinative-launcher karma-script-launcher mocha pegjs requirejs rigger

Canvas 5 Polyfill

Note: Forked to apply PR https://github.com/google/canvas-5-polyfill/pull/23 This fork is maintained because it's useful with node-canvas. All dependencies were updated 2021-09-20 and unit tests work for everything except IE (which wasn't tested).

Canvas 5 Polyfill is a Javascript polyfill library to fill in new features for HTML 5 Canvas that browsers may not have implemented yet, such as Path2D objects and ellipse() on CanvasRenderingContext2D.

Installation

Canvas 5 Polyfill uses Bower to make installation easy:

    bower install --save canvas-5-polyfill

You can also get the code directly at GitHub.

Usage

<html>
<head>
    <title>Test Canvas Polyfill</title>
    <script
      src='bower_components/canvas-5-polyfill/canvas.js'
      type='text/javascript'></script>
</head>
<body>
  <canvas id=ID width=500 height=500>
  <script type='text/javascript' charset='utf-8'>
    var ctx = document.getElementById('ID').getContext('2d');
    var p = new Path2D();
    p.moveTo(100, 10);
    p.lineTo(10, 100);

    ctx.strokeStyle = '#555';
    ctx.lineWidth = 10;
    ctx.stroke(p);
  </script>
</body>
</html>

Status

Canvas 5 Polyfill adds the following classes and methods to an existing HTML Canvas implementation if they are missing, if they are not missing the native implementations are used:

The polyfill adds the following methods to CanvasRenderingContext2D:

void stroke(Path2D path);
void fill(Path2D path, optional CanvasFillRule fillRule = "nonzero");
void clip(Path2D path, optional CanvasFillRule fillRule = "nonzero");
boolean isPointInPath(Path2D path,  double x,
    double y, optional CanvasFillRule fillRule = "nonzero");
boolean isPointInStroke(Path2D path,  double x, double y);
void ellipse( double x, double y, double radiusX, double radiusY,
  double rotation, double startAngle, double endAngle,
  optional boolean anticlockwise = false);

It also adds Path2D with the following constructors:

Path2D()
Path2D(Path2D path, optional CanvasFillRule fillRule = "nonzero"),
Path2D(DOMString d)

Where Path2D has the following methods:

void addPath(Path2D path, SVGMatrix? transformation);
void closePath();
void moveTo(double x,  double y);
void lineTo(double x,  double y);
void quadraticCurveTo( double cpx, double cpy, double x, double y);
void bezierCurveTo( double cp1x, double cp1y, double cp2x, double cp2y,
  double x,  double y);
void arcTo(double x1, double y1, double x2, double y2, double radius);
void arcTo(double x1, double y1, double x2, double y2, double radiusX,
  double radiusY,  double rotation);
void rect(double x, double y, double w, double h);
void arc(double x, double y, double radius, double startAngle,
  double endAngle, optional boolean anticlockwise = false);
void ellipse(double x, double y, double radiusX, double radiusY,
  double rotation, double startAngle, double endAngle,
  optional boolean anticlockwise = false);

Caveats

With this polyfill installed, the calls to context.clip(path), context.isPointInPath(path, x, y) and context.isPointInStroke(path, x, y) all affect the current path.

When using the polyfill the best approach is to move strictly to using Path2D objects to describe paths and then use the path enabled calls on the context, such as ctx.fill(path). Do not mix and match such calls.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More