# ctx-polyfill

> Polyfill CanvasRenderingContext2D and Path2D (currentTransform, resetTransform, imageSmoothingEnabled, etc...)

Latest version **1.1.4** (published 2017-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ctx-polyfill
pnpm add ctx-polyfill
yarn add ctx-polyfill
bun add ctx-polyfill
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2017-09-27 |
| First published | 2017-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | valentin |
| Maintainers | lifaon74 |

## Links

- npm: https://www.npmjs.com/package/ctx-polyfill
- Repository: https://github.com/lifaon74/ctx-polyfill
- Homepage: https://github.com/lifaon74/ctx-polyfill#readme
- Issues: https://github.com/lifaon74/ctx-polyfill/issues
- npm.io page: https://npm.io/package/ctx-polyfill

## Recent versions

- 1.1.4 (latest) — 2017-09-27
- 1.1.3 — 2017-04-10
- 1.1.2 — 2017-04-10
- 1.1.1 — 2017-04-07
- 1.1.0 — 2017-04-07
- 1.0.4 — 2017-04-07
- 1.0.3 — 2017-04-04
- 1.0.2 — 2017-02-03
- 1.0.0 — 2017-01-26

## README

### Polyfill CanvasRenderingContext2D and Path2Dto match last ES7 specifications

Tested on  EDGE, CHROME, FIREFOX, OPERA and IE 10+.

**[INFOS]** The CanvasRenderingContext2D specs are not finished for some methods and may change in future.

#### Install
```
npm i ctx-polyfill --save
```

#### Currently supported
#####  CanvasRenderingContext2D
- [currentTransform](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/currentTransform) : (set and get) return the transform matrix as array [a, b, c, d, e, f].
- [resetTransform](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform) : resets the current transform by the identity matrix.
- [imageSmoothingEnabled](https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) : enable or disable image smoothing (only if natively supported).
- [ellipse](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse) : draw an ellipse.

#####  Path2D ==> [documentation](https://developer.mozilla.org/en-US/docs/Web/API/Path2D)
Stable: arc, arcTo, bezierCurveTo, closePath, ellipse, lineTo, moveTo, quadraticCurveTo, rect.

Experimental: [addPath](https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath).
For size reasons, Path2D polyfill does'nt support SVG path (used as argument in constructor).

#### Helper
Because the specs are not finished, the `currentTransform` or even `Path2D.addPath`originally used [SVGMatrix](https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix) which have been deprecated. Instead, use an Array[6].

If you need SVGMatrix, some hacks have been implemented :
```ts
CanvasRenderingContext2D.useSvgMatrix: boolean;
```
By setting `CanvasRenderingContext2D.useSvgMatrix` to **true**, `currentTransform` will return SVGMatrix instead of array.

```ts
CanvasRenderingContext2D.arrayToSVGMatrix(array: number[]): SVGMatrix;
```
Convert the array transform matrix into a SVGMatrix.

```ts
CanvasRenderingContext2D.svgMatrixToArray(matrix: SVGMatrix): number[];
```
Convert a SVGMatrix into a transform matrix array.

---
_Source: https://npm.io/package/ctx-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._