ctx-polyfill

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 : (set and get) return the transform matrix as array [a, b, c, d, e, f].
• resetTransform : resets the current transform by the identity matrix.
• imageSmoothingEnabled : enable or disable image smoothing (only if natively supported).
• ellipse : draw an ellipse.

Path2D ==> documentation

Stable: arc, arcTo, bezierCurveTo, closePath, ellipse, lineTo, moveTo, quadraticCurveTo, rect.

Experimental: addPath.

With native Path2D, addPath does not support yet a transform argument. If you absolutely need it, do : delete window.Path2D, the polyfill will build it's own Path2D class.

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.addPathoriginally used SVGMatrix which have beed deprecated. Instead, use an Array[6].

If you need SVGMatrix, some hacks have been implemented :

CanvasRenderingContext2D.useSvgMatrix: boolean;

By setting CanvasRenderingContext2D.useSvgMatrix to true, currentTransform will return SVGMatrix instead of array.

CanvasRenderingContext2D.arrayToSVGMatrix(array: number[]): SVGMatrix;

Convert the array transform matrix into a SVGMatrix.

CanvasRenderingContext2D.svgMatrixToArray(matrix: SVGMatrix): number[];

Convert a SVGMatrix into a transform matrix array.