ctx-polyfill - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

ctx-polyfill.js

 (function() {
   /**
-   * Polyfill CanvasRenderingContext2D
+   * Helper to be compatible with future standard (because current standards are not yet properly defined)
    */
 
+  if(CanvasRenderingContext2D.useSvgMatrix === void 0) {
+    CanvasRenderingContext2D.useSvgMatrix = false;
+  }
 
-  /**
-   * Polyfill currentTranform
-   */
-
-  // inspired form https://github.com/mozilla/pdf.js/blob/master/src/display/canvas.js
-
-  var arrayToSVGMatrix = function(array) {
+  CanvasRenderingContext2D.arrayToSVGMatrix = function(array) {
     var matrix = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
@@ -24,15 +21,27 @@ matrix.a = array[0];
 
-  // var svgMatrixToArray = function(matrix) {
-  //   return [
-  //     matrix.a,
-  //     matrix.b,
-  //     matrix.c,
-  //     matrix.d,
-  //     matrix.e,
-  //     matrix.f
-  //   ];
-  // };
+  CanvasRenderingContext2D.svgMatrixToArray = function(matrix) {
+    if(!(matrix instanceof SVGMatrix)) throw new Error('Matrix is not a SVGMatrix');
+    return [
+      matrix.a,
+      matrix.b,
+      matrix.c,
+      matrix.d,
+      matrix.e,
+      matrix.f
+    ];
+  };
 
-  if(!('resetTransform' in CanvasRenderingContext2D.prototype)) {
-    CanvasRenderingContext2D.prototype.resetTransform = function() {
+})();
+
+(function() {
+  /**
+   * Polyfill CanvasRenderingContext2D
+   */
+
+  // inspired form https://github.com/mozilla/pdf.js/blob/master/src/display/canvas.js
+
+  var canvasRenderingContext2DPrototype = CanvasRenderingContext2D.prototype;
+
+  if(!('resetTransform' in canvasRenderingContext2DPrototype)) {
+    canvasRenderingContext2DPrototype.resetTransform = function() {
       this.setTransform(1, 0, 0, 1, 0, 0);
@@ -42,10 +51,12 @@ };
 
-  if(!('currentTransform' in CanvasRenderingContext2D.prototype)) {
-    if('mozCurrentTransform' in CanvasRenderingContext2D.prototype) {
-      Object.defineProperty(CanvasRenderingContext2D.prototype, 'currentTransform', {
+  if(!('currentTransform' in canvasRenderingContext2DPrototype)) {
+    if('mozCurrentTransform' in canvasRenderingContext2DPrototype) {
+      Object.defineProperty(canvasRenderingContext2DPrototype, 'currentTransform', {
         get: function() {
-          return this.mozCurrentTransform;
+          return CanvasRenderingContext2D.useSvgMatrix ?
+            CanvasRenderingContext2D.arrayToSVGMatrix(this.mozCurrentTransform) : this.mozCurrentTransform;
         },
         set: function(matrix) {
-          this.mozCurrentTransform = matrix;
+          this.mozCurrentTransform = CanvasRenderingContext2D.useSvgMatrix ?
+            CanvasRenderingContext2D.svgMatrixToArray(matrix) : matrix;
         },
@@ -70,9 +81,18 @@ enumerable: true,
 
-      Object.defineProperty(CanvasRenderingContext2D.prototype, 'currentTransform', {
+      Object.defineProperty(canvasRenderingContext2DPrototype, 'currentTransform', {
         get: function () {
-          return this._transformMatrix;
+          return CanvasRenderingContext2D.useSvgMatrix ?
+            CanvasRenderingContext2D.arrayToSVGMatrix(this._transformMatrix) : this._transformMatrix;
         },
         set: function(matrix) {
-          this._transformMatrix = matrix;
-          this.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+          this._transformMatrix = CanvasRenderingContext2D.useSvgMatrix ?
+            CanvasRenderingContext2D.svgMatrixToArray(matrix) : matrix;
+          this.setTransform(
+            this._transformMatrix[0],
+            this._transformMatrix[1],
+            this._transformMatrix[2],
+            this._transformMatrix[3],
+            this._transformMatrix[4],
+            this._transformMatrix[5]
+          );
         },
@@ -84,4 +104,4 @@ enumerable: true,
 
-      var translate = CanvasRenderingContext2D.prototype.translate;
-      CanvasRenderingContext2D.prototype.translate = function(x, y) {
+      var translate = canvasRenderingContext2DPrototype.translate;
+      canvasRenderingContext2DPrototype.translate = function(x, y) {
         var matrix = this._transformMatrix;
@@ -93,4 +113,4 @@ matrix[4] = matrix[0] * x + matrix[2] * y + matrix[4];
 
-      var scale = CanvasRenderingContext2D.prototype.scale;
-      CanvasRenderingContext2D.prototype.scale = function(x, y) {
+      var scale = canvasRenderingContext2DPrototype.scale;
+      canvasRenderingContext2DPrototype.scale = function(x, y) {
         var matrix = this._transformMatrix;
@@ -104,4 +124,4 @@ matrix[0] *= x;
 
-      var rotate = CanvasRenderingContext2D.prototype.rotate;
-      CanvasRenderingContext2D.prototype.rotate = function(angle) {
+      var rotate = canvasRenderingContext2DPrototype.rotate;
+      canvasRenderingContext2DPrototype.rotate = function(angle) {
         var cosValue = Math.cos(angle);
@@ -123,4 +143,4 @@ var sinValue = Math.sin(angle);
 
-      var transform = CanvasRenderingContext2D.prototype.transform;
-      CanvasRenderingContext2D.prototype.transform = function(a, b, c, d, e, f) {
+      var transform = canvasRenderingContext2DPrototype.transform;
+      canvasRenderingContext2DPrototype.transform = function(a, b, c, d, e, f) {
         var matrix =  this._transformMatrix;
@@ -138,4 +158,4 @@ this._transformMatrix = [
 
-      var setTransform = CanvasRenderingContext2D.prototype.setTransform;
-      CanvasRenderingContext2D.prototype.setTransform  = function(a, b, c, d, e, f) {
+      var setTransform = canvasRenderingContext2DPrototype.setTransform;
+      canvasRenderingContext2DPrototype.setTransform  = function(a, b, c, d, e, f) {
         this._transformMatrix = [a, b, c, d, e, f];
@@ -145,4 +165,4 @@ setTransform.call(this, a, b, c, d, e, f);
 
-      var resetTransform = CanvasRenderingContext2D.prototype.resetTransform;
-      CanvasRenderingContext2D.prototype.resetTransform  = function() {
+      var resetTransform = canvasRenderingContext2DPrototype.resetTransform;
+      canvasRenderingContext2DPrototype.resetTransform  = function() {
         this._transformMatrix = [1, 0, 0, 1, 0, 0];
@@ -152,4 +172,4 @@ resetTransform.call(this);
 
-      var save = CanvasRenderingContext2D.prototype.save;
-      CanvasRenderingContext2D.prototype.save = function() {
+      var save = canvasRenderingContext2DPrototype.save;
+      canvasRenderingContext2DPrototype.save = function() {
         this._transformStack.push(this._transformMatrix);
@@ -160,4 +180,4 @@ this._transformMatrix =  this._transformMatrix.slice(0, 6); // copy
 
-      var restore = CanvasRenderingContext2D.prototype.restore;
-      CanvasRenderingContext2D.prototype.restore = function() {
+      var restore = canvasRenderingContext2DPrototype.restore;
+      canvasRenderingContext2DPrototype.restore = function() {
         var matrix = this._transformStack.pop();
@@ -173,4 +193,4 @@ if(matrix) {
 
-  if(!('imageSmoothingEnabled' in CanvasRenderingContext2D.prototype)) {
-    Object.defineProperty(CanvasRenderingContext2D.prototype, 'imageSmoothingEnabled', {
+  if(!('imageSmoothingEnabled' in canvasRenderingContext2DPrototype)) {
+    Object.defineProperty(canvasRenderingContext2DPrototype, 'imageSmoothingEnabled', {
       get: function () {
@@ -210,4 +230,4 @@ if(this.mozImageSmoothingEnabled !== void 0) {
 
-  if(!('ellipse' in CanvasRenderingContext2D.prototype)) {
-    CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
+  if(!('ellipse' in canvasRenderingContext2DPrototype)) {
+    canvasRenderingContext2DPrototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
       this.save();
@@ -222,5 +242,85 @@ this.translate(x, y);
 
-  CanvasRenderingContext2D.arrayToSVGMatrix = arrayToSVGMatrix;
+})();
 
+(function() {
+  /**
+   * Polyfill Path2D
+   */
 
+  if(!('Path2D' in window) || !('addPath' in window.Path2D.prototype)) {
+    var supportNativePath2D = ('Path2D' in window);
+
+    // polyfill Path2D class
+    if(!supportNativePath2D) {
+      Path2D = function(path2D) {
+        if(path2D instanceof Path2D) {
+          this.addPath(path2D);
+        }
+      };
+      window.Path2D = Path2D;
+    }
+
+    var path2DPrototype = window.Path2D.prototype;
+
+    // save all operations for the path
+    Object.defineProperty(path2DPrototype, '_operations', { value: [] });
+
+    ['arc', 'arcTo', 'bezierCurveTo', 'closePath', 'ellipse', 'lineTo', 'moveTo', 'quadraticCurveTo', 'rect']
+      .forEach(function(attributeName) {
+        var original = path2DPrototype[attributeName];
+        path2DPrototype[attributeName] = function() {
+          this._operations.push({ type: attributeName, arguments: Array.prototype.slice.call(arguments, 0) });
+          if(supportNativePath2D) original.apply(this, arguments);
+        };
+      });
+
+    // polyfill CanvasRenderingContext2D drawing Path2D
+    if(!supportNativePath2D) {
+      var canvasRenderingContext2DPrototype = CanvasRenderingContext2D.prototype;
+      ['fill', 'stroke', 'clip', 'isPointInPath', 'isPointInStroke']
+        .forEach(function(attributeName) {
+          var original = canvasRenderingContext2DPrototype[attributeName];
+          canvasRenderingContext2DPrototype[attributeName] = function(path2D) {
+            if(path2D instanceof Path2D) {
+              this.beginPath();
+              var operation;
+              for(var i = 0, l = path2D._operations.length; i < l; i++) {
+                operation = path2D._operations[i];
+                canvasRenderingContext2DPrototype[operation.type].apply(this, operation.arguments);
+              }
+              original.apply(this, Array.prototype.slice.call(arguments, 1));
+            } else {
+              original.apply(this, arguments);
+            }
+          };
+        });
+    }
+
+    // polyfill addPath
+    if(!('addPath' in path2DPrototype)) {
+      path2DPrototype.addPath = function(path2D, transform) {
+        if(transform !== void 0) {
+          if(supportNativePath2D) throw new Error('Transform is not supported yet on native Path2D addPath.');
+
+          this._operations.push({ type: 'save', arguments: [] });
+          this._operations.push({
+            type: 'transform',
+            arguments: CanvasRenderingContext2D.useSvgMatrix ?
+              CanvasRenderingContext2D.svgMatrixToArray(transform) : transform
+          });
+        }
+
+        var operation;
+        for(var i = 0, l = path2D._operations.length; i < l; i++) {
+          operation = path2D._operations[i];
+          path2DPrototype[operation.type].apply(this, operation.arguments);
+        }
+
+        if(transform !== void 0) {
+          this._operations.push({ type: 'restore', arguments: [] });
+        }
+      };
+    }
+
+  }
 })();

ctx-polyfill.min.js

@@ -1,1 +0,1 @@
-(function(){var t=function(t){var e=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGMatrix();e.a=t[0];e.b=t[1];e.c=t[2];e.d=t[3];e.e=t[4];e.f=t[5];return e};if(!("resetTransform"in CanvasRenderingContext2D.prototype)){CanvasRenderingContext2D.prototype.resetTransform=function(){this.setTransform(1,0,0,1,0,0)}}if(!("currentTransform"in CanvasRenderingContext2D.prototype)){if("mozCurrentTransform"in CanvasRenderingContext2D.prototype){Object.defineProperty(CanvasRenderingContext2D.prototype,"currentTransform",{get:function(){return this.mozCurrentTransform},set:function(t){this.mozCurrentTransform=t},enumerable:true,configurable:true})}else{var e=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(t,n){var r=e.call(this,t,n);switch(t){case"2d":r._transformStack=[];r._transformMatrix=[1,0,0,1,0,0];break}return r};Object.defineProperty(CanvasRenderingContext2D.prototype,"currentTransform",{get:function(){return this._transformMatrix},set:function(t){this._transformMatrix=t;this.setTransform(t[0],t[1],t[2],t[3],t[4],t[5])},enumerable:true,configurable:true});var n=CanvasRenderingContext2D.prototype.translate;CanvasRenderingContext2D.prototype.translate=function(t,e){var r=this._transformMatrix;r[4]=r[0]*t+r[2]*e+r[4];r[5]=r[1]*t+r[3]*e+r[5];n.call(this,t,e)};var r=CanvasRenderingContext2D.prototype.scale;CanvasRenderingContext2D.prototype.scale=function(t,e){var n=this._transformMatrix;n[0]*=t;n[1]*=t;n[2]*=e;n[3]*=e;r.call(this,t,e)};var a=CanvasRenderingContext2D.prototype.rotate;CanvasRenderingContext2D.prototype.rotate=function(t){var e=Math.cos(t);var n=Math.sin(t);var r=this._transformMatrix;this._transformMatrix=[r[0]*e+r[2]*n,r[1]*e+r[3]*n,r[0]*-n+r[2]*e,r[1]*-n+r[3]*e,r[4],r[5]];a.call(this,t)};var o=CanvasRenderingContext2D.prototype.transform;CanvasRenderingContext2D.prototype.transform=function(t,e,n,r,a,i){var s=this._transformMatrix;this._transformMatrix=[s[0]*t+s[2]*e,s[1]*t+s[3]*e,s[0]*n+s[2]*r,s[1]*n+s[3]*r,s[0]*a+s[2]*i+s[4],s[1]*a+s[3]*i+s[5]];o.call(this,t,e,n,r,a,i)};var i=CanvasRenderingContext2D.prototype.setTransform;CanvasRenderingContext2D.prototype.setTransform=function(t,e,n,r,a,o){this._transformMatrix=[t,e,n,r,a,o];i.call(this,t,e,n,r,a,o)};var s=CanvasRenderingContext2D.prototype.resetTransform;CanvasRenderingContext2D.prototype.resetTransform=function(){this._transformMatrix=[1,0,0,1,0,0];s.call(this)};var m=CanvasRenderingContext2D.prototype.save;CanvasRenderingContext2D.prototype.save=function(){this._transformStack.push(this._transformMatrix);this._transformMatrix=this._transformMatrix.slice(0,6);m.call(this)};var f=CanvasRenderingContext2D.prototype.restore;CanvasRenderingContext2D.prototype.restore=function(){var t=this._transformStack.pop();if(t){this._transformMatrix=t}f.call(this)}}}if(!("imageSmoothingEnabled"in CanvasRenderingContext2D.prototype)){Object.defineProperty(CanvasRenderingContext2D.prototype,"imageSmoothingEnabled",{get:function(){if(this.mozImageSmoothingEnabled!==void 0){return this.mozImageSmoothingEnabled}else if(this.webkitImageSmoothingEnabled!==void 0){return this.webkitImageSmoothingEnabled}else if(this.msImageSmoothingEnabled!==void 0){return this.msImageSmoothingEnabled}else{return true}},set:function(t){if(this.mozImageSmoothingEnabled!==void 0){this.mozImageSmoothingEnabled=t}else if(this.webkitImageSmoothingEnabled!==void 0){this.webkitImageSmoothingEnabled=t}else if(this.msImageSmoothingEnabled!==void 0){this.msImageSmoothingEnabled=t}},enumerable:true,configurable:true})}if(!("ellipse"in CanvasRenderingContext2D.prototype)){CanvasRenderingContext2D.prototype.ellipse=function(t,e,n,r,a,o,i,s){this.save();this.translate(t,e);this.rotate(a);this.scale(n,r);this.arc(0,0,1,o,i,s);this.restore()}}CanvasRenderingContext2D.arrayToSVGMatrix=t})();
+(function(){if(CanvasRenderingContext2D.useSvgMatrix===void 0){CanvasRenderingContext2D.useSvgMatrix=false}CanvasRenderingContext2D.arrayToSVGMatrix=function(t){var r=document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGMatrix();r.a=t[0];r.b=t[1];r.c=t[2];r.d=t[3];r.e=t[4];r.f=t[5];return r};CanvasRenderingContext2D.svgMatrixToArray=function(t){if(!(t instanceof SVGMatrix))throw new Error("Matrix is not a SVGMatrix");return[t.a,t.b,t.c,t.d,t.e,t.f]}})();(function(){var t=CanvasRenderingContext2D.prototype;if(!("resetTransform"in t)){t.resetTransform=function(){this.setTransform(1,0,0,1,0,0)}}if(!("currentTransform"in t)){if("mozCurrentTransform"in t){Object.defineProperty(t,"currentTransform",{get:function(){return CanvasRenderingContext2D.useSvgMatrix?CanvasRenderingContext2D.arrayToSVGMatrix(this.mozCurrentTransform):this.mozCurrentTransform},set:function(t){this.mozCurrentTransform=CanvasRenderingContext2D.useSvgMatrix?CanvasRenderingContext2D.svgMatrixToArray(t):t},enumerable:true,configurable:true})}else{var r=HTMLCanvasElement.prototype.getContext;HTMLCanvasElement.prototype.getContext=function(t,a){var n=r.call(this,t,a);switch(t){case"2d":n._transformStack=[];n._transformMatrix=[1,0,0,1,0,0];break}return n};Object.defineProperty(t,"currentTransform",{get:function(){return CanvasRenderingContext2D.useSvgMatrix?CanvasRenderingContext2D.arrayToSVGMatrix(this._transformMatrix):this._transformMatrix},set:function(t){this._transformMatrix=CanvasRenderingContext2D.useSvgMatrix?CanvasRenderingContext2D.svgMatrixToArray(t):t;this.setTransform(this._transformMatrix[0],this._transformMatrix[1],this._transformMatrix[2],this._transformMatrix[3],this._transformMatrix[4],this._transformMatrix[5])},enumerable:true,configurable:true});var a=t.translate;t.translate=function(t,r){var n=this._transformMatrix;n[4]=n[0]*t+n[2]*r+n[4];n[5]=n[1]*t+n[3]*r+n[5];a.call(this,t,r)};var n=t.scale;t.scale=function(t,r){var a=this._transformMatrix;a[0]*=t;a[1]*=t;a[2]*=r;a[3]*=r;n.call(this,t,r)};var e=t.rotate;t.rotate=function(t){var r=Math.cos(t);var a=Math.sin(t);var n=this._transformMatrix;this._transformMatrix=[n[0]*r+n[2]*a,n[1]*r+n[3]*a,n[0]*-a+n[2]*r,n[1]*-a+n[3]*r,n[4],n[5]];e.call(this,t)};var i=t.transform;t.transform=function(t,r,a,n,e,o){var s=this._transformMatrix;this._transformMatrix=[s[0]*t+s[2]*r,s[1]*t+s[3]*r,s[0]*a+s[2]*n,s[1]*a+s[3]*n,s[0]*e+s[2]*o+s[4],s[1]*e+s[3]*o+s[5]];i.call(this,t,r,a,n,e,o)};var o=t.setTransform;t.setTransform=function(t,r,a,n,e,i){this._transformMatrix=[t,r,a,n,e,i];o.call(this,t,r,a,n,e,i)};var s=t.resetTransform;t.resetTransform=function(){this._transformMatrix=[1,0,0,1,0,0];s.call(this)};var f=t.save;t.save=function(){this._transformStack.push(this._transformMatrix);this._transformMatrix=this._transformMatrix.slice(0,6);f.call(this)};var h=t.restore;t.restore=function(){var t=this._transformStack.pop();if(t){this._transformMatrix=t}h.call(this)}}}if(!("imageSmoothingEnabled"in t)){Object.defineProperty(t,"imageSmoothingEnabled",{get:function(){if(this.mozImageSmoothingEnabled!==void 0){return this.mozImageSmoothingEnabled}else if(this.webkitImageSmoothingEnabled!==void 0){return this.webkitImageSmoothingEnabled}else if(this.msImageSmoothingEnabled!==void 0){return this.msImageSmoothingEnabled}else{return true}},set:function(t){if(this.mozImageSmoothingEnabled!==void 0){this.mozImageSmoothingEnabled=t}else if(this.webkitImageSmoothingEnabled!==void 0){this.webkitImageSmoothingEnabled=t}else if(this.msImageSmoothingEnabled!==void 0){this.msImageSmoothingEnabled=t}},enumerable:true,configurable:true})}if(!("ellipse"in t)){t.ellipse=function(t,r,a,n,e,i,o,s){this.save();this.translate(t,r);this.rotate(e);this.scale(a,n);this.arc(0,0,1,i,o,s);this.restore()}}})();(function(){if(!("Path2D"in window)||!("addPath"in window.Path2D.prototype)){var t="Path2D"in window;if(!t){Path2D=function(t){if(t instanceof Path2D){this.addPath(t)}};window.Path2D=Path2D}var r=window.Path2D.prototype;Object.defineProperty(r,"_operations",{value:[]});["arc","arcTo","bezierCurveTo","closePath","ellipse","lineTo","moveTo","quadraticCurveTo","rect"].forEach(function(a){var n=r[a];r[a]=function(){this._operations.push({type:a,arguments:Array.prototype.slice.call(arguments,0)});if(t)n.apply(this,arguments)}});if(!t){var a=CanvasRenderingContext2D.prototype;["fill","stroke","clip","isPointInPath","isPointInStroke"].forEach(function(t){var r=a[t];a[t]=function(t){if(t instanceof Path2D){this.beginPath();var n;for(var e=0,i=t._operations.length;e<i;e++){n=t._operations[e];a[n.type].apply(this,n.arguments)}r.apply(this,Array.prototype.slice.call(arguments,1))}else{r.apply(this,arguments)}}})}if(!("addPath"in r)){r.addPath=function(a,n){if(n!==void 0){if(t)throw new Error("Transform is not supported yet on native Path2D addPath.");this._operations.push({type:"save",arguments:[]});this._operations.push({type:"transform",arguments:CanvasRenderingContext2D.useSvgMatrix?CanvasRenderingContext2D.svgMatrixToArray(n):n})}var e;for(var i=0,o=a._operations.length;i<o;i++){e=a._operations[i];r[e.type].apply(this,e.arguments)}if(n!==void 0){this._operations.push({type:"restore",arguments:[]})}}}}})();

package.json

 {
   "name": "ctx-polyfill",
-  "version": "1.0.4",
-  "description": "Polyfill CanvasRenderingContext2D : currentTransform, resetTransform, imageSmoothingEnabled, etc...",
+  "version": "1.1.0",
+  "description": "Polyfill CanvasRenderingContext2D and Path2D (currentTransform, resetTransform, imageSmoothingEnabled, etc...)",
   "main": "ctx-polyfill.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -1,5 +0,7 @@
-### Polyfill CanvasRenderingContext2D to match last ES7 specifications
+### 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
@@ -11,3 +13,3 @@ ```
 #### 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].
@@ -18,7 +20,26 @@ - [resetTransform](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform) : resets the current transform by the identity matrix.
 
+#####  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).
+
+With **native** Path2D, `addPath` does not support yet a `tranform`argument. 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.addPath`originally used [SVGMatrix](https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix) which have beed deprecated. Instead, use an Array[6].
+
+If you need SVGMatrix, some hacks have been implemented :
 ```ts
-CanvasRenderingContext2D.arrayToSVGMatrix(array: number[]): SVGMatrix
+CanvasRenderingContext2D.useSvgMatrix: boolean;
 ```
-Convert the array transform matrix into an [SVGMatrix](https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix)
+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(array: number[]): number[];
+```
+Convert a SVGMatrix into a transform matrix array.

tests/test.js

@@ -46,3 +46,16 @@ const Tester = require('./Tester.class');
 
+    const getPixel = `
+      var getPixel = function(ctx, x, y) {
+        return ctx.getImageData(x, y, 1, 1).data;
+      };
+    `;
 
+    const prepareCanvas = `
+        var canvas = document.getElementById('canvas');
+        var ctx = canvas.getContext('2d');
+        ctx.resetTransform();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    `;
+
+
     test.it('Test currentTransform', () => {
@@ -52,5 +65,3 @@ driver.wait(until.elementLocated(By.css('#canvas')));
       return tester.executeScript(driver, `
-        var canvas = document.getElementById('canvas');
-        var ctx = canvas.getContext('2d');
-
+        ${prepareCanvas}
         ${testCurrentTransForm}
@@ -75,5 +86,3 @@
       return tester.executeScript(driver, `
-        var canvas = document.getElementById('canvas');
-        var ctx = canvas.getContext('2d');
-
+        ${prepareCanvas}
         ${testCurrentTransForm}
@@ -96,5 +105,3 @@
       return tester.executeScript(driver, `
-        var canvas = document.getElementById('canvas');
-        var ctx = canvas.getContext('2d');
-
+        ${prepareCanvas}
         ${testCurrentTransForm}
@@ -125,4 +132,3 @@
       return tester.executeScript(driver, `
-        var canvas = document.getElementById('canvas');
-        var ctx = canvas.getContext('2d');
+        ${prepareCanvas}
 
@@ -138,5 +144,5 @@ if(!('imageSmoothingEnabled' in ctx)) throw new Error('imageSmoothingEnabled not present in ctx');
       return tester.executeScript(driver, `
-        var canvas = document.getElementById('canvas');
-        var ctx = canvas.getContext('2d');
-        
+        ${prepareCanvas}
+        ${getPixel}
+
         if(!('ellipse' in ctx)) throw new Error('Ellipse not present in ctx');
@@ -147,7 +153,43 @@ // ctx.lineWidth = 10;
         ctx.stroke();
-        if(ctx.getImageData(122, 36, 1, 1).data[3] === 0) throw new Error('Ellipse draw failed');
+        if(getPixel(ctx, 122, 36)[3] === 0) throw new Error('Ellipse draw failed');
       `);
     });
 
+    test.it('Test Path2D methods', () => {
+      driver.wait(until.elementLocated(By.css('#canvas')));
 
+      return tester.executeScript(driver, `
+        ${prepareCanvas}
+        ${getPixel}
+
+        ctx.translate(0.5, 0.5);
+        var path2D = new Path2D();
+        path2D.rect(10, 10, 10, 10);
+        path2D.moveTo(150, 20);
+        path2D.arcTo(150, 100, 50, 20, 30);
+        var path2DCopy = new Path2D(path2D);
+        ctx.stroke(path2DCopy);
+
+        if(getPixel(ctx, 10, 10)[3] === 0) throw new Error('Path2D draw failed');
+      `);
+    });
+
+    test.it('Test Path2D addPath', () => {
+      driver.wait(until.elementLocated(By.css('#canvas')));
+
+      return tester.executeScript(driver, `
+        ${prepareCanvas}
+        ${getPixel}
+
+        ctx.translate(0.5, 0.5);
+        var path2D = new Path2D();
+        path2D.rect(10, 10, 10, 10);
+        var path2DCopy = new Path2D();
+        path2DCopy.addPath(path2D);
+        ctx.stroke(path2DCopy);
+        
+        if(getPixel(ctx, 10, 10)[3] === 0) throw new Error('Path2D addPath draw failed');
+      `);
+    });
+
     test.after(() => {
@@ -154,0 +196,0 @@ driver.quit();

No alert changes

Improved metrics

Total package byte prevSize

29840

increased by34.68%

Lines of code

543

increased by29.59%

Number of lines in readme file

43

increased by86.96%

No dependency changes