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 tranformargument. If you absolutelly need it, do : delete window.Path2D, the polyfill will build it's own Path2DClass. 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(array: number[]): number[];

Convert a SVGMatrix into a transform matrix array.