ctx-polyfill
v1.1.4
Published
Polyfill CanvasRenderingContext2D and Path2D (currentTransform, resetTransform, imageSmoothingEnabled, etc...)
Downloads
184,410
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 : (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. 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 which have been 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.