@emasoft/svg-matrix 1.1.0 → 1.2.0

package/src/vendor/inkscape-mesh-polyfill.js

@@ -1,843 +1,1030 @@
-
 // Use Canvas to render a mesh gradient, passing the rendering to an image via a data stream.
 // Copyright: Tavmjong Bah 2017
 // Distributed under GNU General Public License version 3 or later. See <http://fsf.org/>.
 
-(function() {
-    var counter = 0;  // Temp, number of calls to Canvas
+(function () {
+  var counter = 0; // Temp, number of calls to Canvas
 
-    // Name spaces -----------------------------------
-    var svgNS    = "http://www.w3.org/2000/svg",
-        xlinkNS  = "http://www.w3.org/1999/xlink",
-        xhtmlNS  = "http://www.w3.org/1999/xhtml";
+  // Name spaces -----------------------------------
+  var svgNS = "http://www.w3.org/2000/svg",
+    xlinkNS = "http://www.w3.org/1999/xlink",
+    xhtmlNS = "http://www.w3.org/1999/xhtml";
 
-    // Test if mesh gradients are supported.
-    var m = document.createElementNS( svgNS, "meshgradient" );
+  // Test if mesh gradients are supported.
+  var m = document.createElementNS(svgNS, "meshgradient");
 
-    if (m.x) {
-	    return;
-    }
+  if (m.x) {
+    return;
+  }
 
-    // Point class -----------------------------------
-    function Point(x, y) {
-	    this.x = x || 0;
-	    this.y = y || 0;
-    }
+  // Point class -----------------------------------
+  function Point(x, y) {
+    this.x = x || 0;
+    this.y = y || 0;
+  }
 
-    Point.prototype.x = null;
-    Point.prototype.y = null;
+  Point.prototype.x = null;
+  Point.prototype.y = null;
 
-    Point.prototype.get_x = function() {
-	    return this.x;
-    };
+  Point.prototype.get_x = function () {
+    return this.x;
+  };
 
-    Point.prototype.get_y = function() {
-	    return this.y;
-    };
+  Point.prototype.get_y = function () {
+    return this.y;
+  };
 
-    Point.prototype.clone = function() {
-	    return new Point(this.x, this.y);
-    };
+  Point.prototype.clone = function () {
+    return new Point(this.x, this.y);
+  };
 
-    Point.prototype.add = function(v) {
-	    return new Point(this.x + v.x, this.y + v.y);
-    };
+  Point.prototype.add = function (v) {
+    return new Point(this.x + v.x, this.y + v.y);
+  };
 
-    Point.prototype.scale = function(v) {
-        if(v instanceof Point) {
-            return new Point(this.x * v.x, this.y * v.y);
-        }
-        return new Point(this.x * v, this.y * v);
-    };
-
-    // Transform by affine
-    Point.prototype.transform = function(a) {
-        var x = this.x * a.a + this.y * a.c + a.e,
-            y = this.x * a.b + this.y * a.d + a.f;
-        return new Point(x, y);
-    };
-
-    Point.prototype.dist_sq = function(v) {
-        var x = this.x - v.x,
-            y = this.y - v.y;
-        return (x*x + y*y);
-    };
-
-    Point.prototype.toString = function() {
-	    return "(x=" + this.x + ", y=" + this.y + ")";
-    };
-
-    // Affine class -----------------------------------
-
-    // As defined in the SVG spec
-    // | a  c  e |
-    // | b  d  f |
-    // | 0  0  1 |
-    function Affine(a, b, c, d, e, f) {
-        if (a === undefined) {
-            this.a = 1;
-            this.b = 0;
-            this.c = 0;
-            this.d = 1;
-            this.e = 0;
-            this.f = 0;
-        } else {
-            this.a = a;
-            this.b = b;
-            this.c = c;
-            this.d = d;
-            this.e = e;
-            this.f = f;
-        }
+  Point.prototype.scale = function (v) {
+    if (v instanceof Point) {
+      return new Point(this.x * v.x, this.y * v.y);
     }
-
-    Affine.prototype.a = null;
-    Affine.prototype.b = null;
-    Affine.prototype.c = null;
-    Affine.prototype.d = null;
-    Affine.prototype.e = null;
-    Affine.prototype.f = null;
-
-    Affine.prototype.append = function(v) {
-        if (!(v instanceof Affine)) {
-            console.log ( "mesh.js: argument to Affine.append is not affine!");
-        }
-
-        var a = this.a * v.a + this.c * v.b,
-            b = this.b * v.a + this.d * v.b,
-            c = this.a * v.c + this.c * v.d,
-            d = this.b * v.c + this.d * v.d,
-            e = this.a * v.e + this.c * v.f + this.e,
-            f = this.b * v.e + this.d * v.f + this.f;
-
-        return new Affine(a, b, c, d, e, f);
-    };
-
-    Affine.prototype.toString = function() {
-        return ("affine: "   + this.a + " " + this.c + " " + this.e +
-            "\n        " + this.b + " " + this.d + " " + this.f);
-    };
-
-    // Utility functions ---------------------------------
-
-    // Browsers return a string rather than a transform list for gradientTransform!
-    function parseTransform(t) {
-        var affine = new Affine(),
-            radian,
-            tan,
-            cos;
-
-        for (var i in t = t.match(/(\w+\(\s*(\-?\d+\.?\d*e?\-?\d*\s*,?\s*)+\))+/g)) {
-            var c = t[i].match(/[\w\.\-]+/g),
-                type = c.shift();
-
-            switch (type) {
-                case "translate":
-                    var trans;
-                    if (c.length == 2) {
-                        trans = new Affine( 1, 0, 0, 1, c[0], c[1] );
-                    } else {
-                        console.log( "mesh.js: translate does not have 2 arguments!" );
-                        trans = new Affine( 1, 0, 0, 1, 0, 0 );
-                    }
-                    affine = affine.append( trans );
-                    break;
-
-                case "scale":
-                    var scale;
-
-                    if (c.length == 1) {
-                        scale = new Affine( c[0], 0, 0, c[0], 0, 0 );
-                    } else if (c.length == 2) {
-                        scale = new Affine( c[0], 0, 0, c[1], 0, 0 );
-                    } else {
-                        console.log( "mesh.js: scale does not have 1 or 2 arguments!" );
-                        scale = new Affine( 1, 0, 0, 1, 0, 0 );
-                    }
-
-                    affine = affine.append(scale);
-
-                    break;
-
-                case "rotate":
-                    if (c.length == 3 ) {
-                        trans = new Affine( 1, 0, 0, 1, c[1], c[2]);
-                        affine = affine.append(trans);
-                    }
-
-                    if (c[0]) {
-                        radian = c[0] * Math.PI/180.0;
-                        cos = Math.cos(radian);
-                        sin = Math.sin(radian);
-
-                        if (Math.abs(cos) < 1e-16) { // I hate rounding errors...
-                            cos = 0;
-                        }
-                        if (Math.abs(sin) < 1e-16) { // I hate rounding errors...
-                            sin = 0;
-                        }
-                        var rotate = new Affine(cos, sin, -sin, cos, 0, 0);
-                        affine = affine.append(rotate);
-                    } else {
-                        console.log( "math.js: No argument to rotate transform!" );
-                    }
-
-                    if (c.length == 3) {
-                        trans = new Affine(1, 0, 0, 1, -c[1], -c[2]);
-                        affine = affine.append(trans);
-                    }
-
-                    break;
-
-                case "skewX":
-                    if (c[0]) {
-                        radian = c[0] * Math.PI/180.0;
-                        tan = Math.tan(radian);
-                        skewx = new Affine( 1, 0, tan, 1, 0, 0 );
-                        affine = affine.append(skewx);
-                    } else {
-                        console.log("math.js: No argument to skewX transform!");
-                    }
-
-                    break;
-
-                case "skewY":
-                    if (c[0]) {
-                        radian = c[0] * Math.PI/180.0;
-                        tan = Math.tan(radian);
-                        skewy = new Affine( 1, tan, 0, 1, 0, 0 );
-                        affine = affine.append(skewy);
-                    } else {
-                        console.log("math.js: No argument to skewY transform!");
-                    }
-
-                    break;
-
-                case "matrix":
-                    if (c.length == 6) {
-                        var matrix = new Affine( c[0], c[1], c[2], c[3], c[4], c[5] );
-                        affine = affine.append(matrix);
-                    } else {
-                        console.log("math.js: Incorrect number of arguments for matrix!");
-                    }
-
-                    break;
-
-                default:
-                    console.log("mesh.js: Unhandled transform type: " + type);
-
-                    break;
-            }
-        }
-
-        return affine;
+    return new Point(this.x * v, this.y * v);
+  };
+
+  // Transform by affine
+  Point.prototype.transform = function (a) {
+    var x = this.x * a.a + this.y * a.c + a.e,
+      y = this.x * a.b + this.y * a.d + a.f;
+    return new Point(x, y);
+  };
+
+  Point.prototype.dist_sq = function (v) {
+    var x = this.x - v.x,
+      y = this.y - v.y;
+    return x * x + y * y;
+  };
+
+  Point.prototype.toString = function () {
+    return "(x=" + this.x + ", y=" + this.y + ")";
+  };
+
+  // Affine class -----------------------------------
+
+  // As defined in the SVG spec
+  // | a  c  e |
+  // | b  d  f |
+  // | 0  0  1 |
+  function Affine(a, b, c, d, e, f) {
+    if (a === undefined) {
+      this.a = 1;
+      this.b = 0;
+      this.c = 0;
+      this.d = 1;
+      this.e = 0;
+      this.f = 0;
+    } else {
+      this.a = a;
+      this.b = b;
+      this.c = c;
+      this.d = d;
+      this.e = e;
+      this.f = f;
     }
-
-    function colorToString(c) {
-        return ("rgb(" + Math.round(c[0]) + "," + Math.round(c[1]) + "," +Math.round(c[2]) + ")");
+  }
+
+  Affine.prototype.a = null;
+  Affine.prototype.b = null;
+  Affine.prototype.c = null;
+  Affine.prototype.d = null;
+  Affine.prototype.e = null;
+  Affine.prototype.f = null;
+
+  Affine.prototype.append = function (v) {
+    if (!(v instanceof Affine)) {
+      console.log("mesh.js: argument to Affine.append is not affine!");
     }
 
-    // Split Bezier using de Casteljau's method... faster version
-    function split_bezier(p0, p1, p2, p3) {
-        var p00 = p0.clone(),
-            p13 = p3.clone(),
-
-            tmp = new Point((p1.x + p2.x)*0.5, (p1.y + p2.y)*0.5),
-            p01 = new Point((p0.x + p1.x)*0.5, (p0.y + p1.y)*0.5),
-            p12 = new Point((p2.x + p3.x)*0.5, (p2.y + p3.y)*0.5),
-
-            p02 = new Point((tmp.x + p01.x)*0.5, (tmp.y + p01.y)*0.5),
-            p11 = new Point((tmp.x + p12.x)*0.5, (tmp.y + p12.y)*0.5),
-
-            p03 = new Point((p02.x + p11.x)*0.5, (p02.y + p11.y)*0.5),
-            p10 = p03.clone();
-
-        return ([[p00, p01, p02, p03],
-		 [p10, p11, p12, p13]]);
+    var a = this.a * v.a + this.c * v.b,
+      b = this.b * v.a + this.d * v.b,
+      c = this.a * v.c + this.c * v.d,
+      d = this.b * v.c + this.d * v.d,
+      e = this.a * v.e + this.c * v.f + this.e,
+      f = this.b * v.e + this.d * v.f + this.f;
+
+    return new Affine(a, b, c, d, e, f);
+  };
+
+  Affine.prototype.toString = function () {
+    return (
+      "affine: " +
+      this.a +
+      " " +
+      this.c +
+      " " +
+      this.e +
+      "\n        " +
+      this.b +
+      " " +
+      this.d +
+      " " +
+      this.f
+    );
+  };
+
+  // Utility functions ---------------------------------
+
+  // Browsers return a string rather than a transform list for gradientTransform!
+  function parseTransform(t) {
+    var affine = new Affine(),
+      radian,
+      tan,
+      cos;
+
+    for (var i in (t = t.match(
+      /(\w+\(\s*(\-?\d+\.?\d*e?\-?\d*\s*,?\s*)+\))+/g,
+    ))) {
+      var c = t[i].match(/[\w\.\-]+/g),
+        type = c.shift();
+
+      switch (type) {
+        case "translate":
+          var trans;
+          if (c.length == 2) {
+            trans = new Affine(1, 0, 0, 1, c[0], c[1]);
+          } else {
+            console.log("mesh.js: translate does not have 2 arguments!");
+            trans = new Affine(1, 0, 0, 1, 0, 0);
+          }
+          affine = affine.append(trans);
+          break;
+
+        case "scale":
+          var scale;
+
+          if (c.length == 1) {
+            scale = new Affine(c[0], 0, 0, c[0], 0, 0);
+          } else if (c.length == 2) {
+            scale = new Affine(c[0], 0, 0, c[1], 0, 0);
+          } else {
+            console.log("mesh.js: scale does not have 1 or 2 arguments!");
+            scale = new Affine(1, 0, 0, 1, 0, 0);
+          }
+
+          affine = affine.append(scale);
+
+          break;
+
+        case "rotate":
+          if (c.length == 3) {
+            trans = new Affine(1, 0, 0, 1, c[1], c[2]);
+            affine = affine.append(trans);
+          }
+
+          if (c[0]) {
+            radian = (c[0] * Math.PI) / 180.0;
+            cos = Math.cos(radian);
+            sin = Math.sin(radian);
+
+            if (Math.abs(cos) < 1e-16) {
+              // I hate rounding errors...
+              cos = 0;
+            }
+            if (Math.abs(sin) < 1e-16) {
+              // I hate rounding errors...
+              sin = 0;
+            }
+            var rotate = new Affine(cos, sin, -sin, cos, 0, 0);
+            affine = affine.append(rotate);
+          } else {
+            console.log("math.js: No argument to rotate transform!");
+          }
+
+          if (c.length == 3) {
+            trans = new Affine(1, 0, 0, 1, -c[1], -c[2]);
+            affine = affine.append(trans);
+          }
+
+          break;
+
+        case "skewX":
+          if (c[0]) {
+            radian = (c[0] * Math.PI) / 180.0;
+            tan = Math.tan(radian);
+            skewx = new Affine(1, 0, tan, 1, 0, 0);
+            affine = affine.append(skewx);
+          } else {
+            console.log("math.js: No argument to skewX transform!");
+          }
+
+          break;
+
+        case "skewY":
+          if (c[0]) {
+            radian = (c[0] * Math.PI) / 180.0;
+            tan = Math.tan(radian);
+            skewy = new Affine(1, tan, 0, 1, 0, 0);
+            affine = affine.append(skewy);
+          } else {
+            console.log("math.js: No argument to skewY transform!");
+          }
+
+          break;
+
+        case "matrix":
+          if (c.length == 6) {
+            var matrix = new Affine(c[0], c[1], c[2], c[3], c[4], c[5]);
+            affine = affine.append(matrix);
+          } else {
+            console.log("math.js: Incorrect number of arguments for matrix!");
+          }
+
+          break;
+
+        default:
+          console.log("mesh.js: Unhandled transform type: " + type);
+
+          break;
+      }
     }
 
-    // See Cairo: cairo-mesh-pattern-rasterizer.c
-    function bezier_steps_sq(points) {
-        var tmp0 = points[0].dist_sq(points[1]),
-            tmp1 = points[2].dist_sq(points[3]),
-            tmp2 = points[0].dist_sq(points[2]) * 0.25,
-            tmp3 = points[1].dist_sq(points[3]) * 0.25,
-            max1 = (tmp0>tmp1?tmp0:tmp1),
-            max2 = (tmp2>tmp3?tmp2:tmp3),
-            max = (max1>max2?max1:max2);
-
-        return max*18;
+    return affine;
+  }
+
+  function colorToString(c) {
+    return (
+      "rgb(" +
+      Math.round(c[0]) +
+      "," +
+      Math.round(c[1]) +
+      "," +
+      Math.round(c[2]) +
+      ")"
+    );
+  }
+
+  // Split Bezier using de Casteljau's method... faster version
+  function split_bezier(p0, p1, p2, p3) {
+    var p00 = p0.clone(),
+      p13 = p3.clone(),
+      tmp = new Point((p1.x + p2.x) * 0.5, (p1.y + p2.y) * 0.5),
+      p01 = new Point((p0.x + p1.x) * 0.5, (p0.y + p1.y) * 0.5),
+      p12 = new Point((p2.x + p3.x) * 0.5, (p2.y + p3.y) * 0.5),
+      p02 = new Point((tmp.x + p01.x) * 0.5, (tmp.y + p01.y) * 0.5),
+      p11 = new Point((tmp.x + p12.x) * 0.5, (tmp.y + p12.y) * 0.5),
+      p03 = new Point((p02.x + p11.x) * 0.5, (p02.y + p11.y) * 0.5),
+      p10 = p03.clone();
+
+    return [
+      [p00, p01, p02, p03],
+      [p10, p11, p12, p13],
+    ];
+  }
+
+  // See Cairo: cairo-mesh-pattern-rasterizer.c
+  function bezier_steps_sq(points) {
+    var tmp0 = points[0].dist_sq(points[1]),
+      tmp1 = points[2].dist_sq(points[3]),
+      tmp2 = points[0].dist_sq(points[2]) * 0.25,
+      tmp3 = points[1].dist_sq(points[3]) * 0.25,
+      max1 = tmp0 > tmp1 ? tmp0 : tmp1,
+      max2 = tmp2 > tmp3 ? tmp2 : tmp3,
+      max = max1 > max2 ? max1 : max2;
+
+    return max * 18;
+  }
+
+  // Curve class --------------------------------------
+  function Curve(nodes, colors) {
+    this.nodes = nodes; // 4 Bezier points
+    this.colors = colors; // 2 x 4 colors (two ends x R+G+B+A)
+  }
+
+  // Paint a Bezier curve. w is width of Canvas window.
+  Curve.prototype.paint_curve = function (v, w) {
+    // If inside, see if we need to split
+    var max = bezier_steps_sq(this.nodes);
+
+    if (max > 2.0) {
+      // Larger values leave holes, smaller take longer to render.
+      var beziers = split_bezier(
+          this.nodes[0],
+          this.nodes[1],
+          this.nodes[2],
+          this.nodes[3],
+        ),
+        colors0 = [[], []], // ([start][end])
+        colors1 = [[], []];
+      for (var i = 0; i < 4; ++i) {
+        colors0[0][i] = this.colors[0][i];
+        colors0[1][i] = (this.colors[0][i] + this.colors[1][i]) / 2;
+        colors1[0][i] = (this.colors[0][i] + this.colors[1][i]) / 2;
+        colors1[1][i] = this.colors[1][i];
+      }
+      var curve0 = new Curve(beziers[0], colors0),
+        curve1 = new Curve(beziers[1], colors1);
+      curve0.paint_curve(v, w);
+      curve1.paint_curve(v, w);
+    } else {
+      counter++;
+
+      // Directly write data
+      var x = Math.round(this.nodes[0].x),
+        y = Math.round(this.nodes[0].y);
+      if (x >= 0 && x < w) {
+        var index = (y * w + x) * 4;
+        v[index] = Math.round(this.colors[0][0]);
+        v[index + 1] = Math.round(this.colors[0][1]);
+        v[index + 2] = Math.round(this.colors[0][2]);
+        v[index + 3] = Math.round(this.colors[0][3]); // Alpha
+      }
     }
-
-    // Curve class --------------------------------------
-    function Curve(nodes, colors) {
-        this.nodes = nodes;  // 4 Bezier points
-        this.colors = colors; // 2 x 4 colors (two ends x R+G+B+A)
+  };
+
+  // Patch class -------------------------------------
+  function Patch(nodes, colors) {
+    this.nodes = nodes; // 4x4 array of points
+    this.colors = colors; // 2x2x4 colors (four corners x R+G+B+A)
+  }
+
+  // Set path for future stroking or filling... useful for debugging.
+  Patch.prototype.setOutline = function (v) {
+    // Draw patch outline
+    v.beginPath();
+    v.moveTo(this.nodes[0][0].x, this.nodes[0][0].y);
+    v.bezierCurveTo(
+      this.nodes[0][1].x,
+      this.nodes[0][1].y,
+      this.nodes[0][2].x,
+      this.nodes[0][2].y,
+      this.nodes[0][3].x,
+      this.nodes[0][3].y,
+    );
+    v.bezierCurveTo(
+      this.nodes[1][3].x,
+      this.nodes[1][3].y,
+      this.nodes[2][3].x,
+      this.nodes[2][3].y,
+      this.nodes[3][3].x,
+      this.nodes[3][3].y,
+    );
+    v.bezierCurveTo(
+      this.nodes[3][2].x,
+      this.nodes[3][2].y,
+      this.nodes[3][1].x,
+      this.nodes[3][1].y,
+      this.nodes[3][0].x,
+      this.nodes[3][0].y,
+    );
+    v.bezierCurveTo(
+      this.nodes[2][0].x,
+      this.nodes[2][0].y,
+      this.nodes[1][0].x,
+      this.nodes[1][0].y,
+      this.nodes[0][0].x,
+      this.nodes[0][0].y,
+    );
+    v.closePath();
+  };
+
+  // Draw stroke patch... useful if debugging.
+  Patch.prototype.drawOutline = function (v) {
+    this.setOutline(v);
+    v.strokeStyle = "black";
+    v.stroke();
+  };
+
+  // Fill patch... useful if debugging.
+  Patch.prototype.fillOutline = function (v) {
+    this.setOutline(v);
+    v.fillStyle = colorToString(this.colors[0]);
+    v.fill();
+  };
+
+  // Split patch horizontally into two patches.
+  Patch.prototype.split = function () {
+    var nodes0 = [[], [], [], []],
+      nodes1 = [[], [], [], []],
+      colors0 = [
+        [[], []],
+        [[], []],
+      ],
+      colors1 = [
+        [[], []],
+        [[], []],
+      ];
+
+    for (var i = 0; i < 4; ++i) {
+      var beziers = split_bezier(
+        this.nodes[0][i],
+        this.nodes[1][i],
+        this.nodes[2][i],
+        this.nodes[3][i],
+      );
+
+      for (var j = 0; j < 4; ++j) {
+        nodes0[0][i] = beziers[0][0];
+        nodes0[1][i] = beziers[0][1];
+        nodes0[2][i] = beziers[0][2];
+        nodes0[3][i] = beziers[0][3];
+        nodes1[0][i] = beziers[1][0];
+        nodes1[1][i] = beziers[1][1];
+        nodes1[2][i] = beziers[1][2];
+        nodes1[3][i] = beziers[1][3];
+      }
     }
 
-    // Paint a Bezier curve. w is width of Canvas window.
-    Curve.prototype.paint_curve = function(v, w) {
-        // If inside, see if we need to split
-        var max = bezier_steps_sq(this.nodes);
-
-        if (max > 2.0) {  // Larger values leave holes, smaller take longer to render.
-            var beziers = split_bezier(this.nodes[0],this.nodes[1],this.nodes[2],this.nodes[3]),
-                colors0 = [[],[]], // ([start][end])
-                colors1 = [[],[]];
-            for (var i = 0; i < 4; ++ i) {
-                colors0[0][i] = this.colors[0][i];
-                colors0[1][i] = (this.colors[0][i] + this.colors[1][i])/2;
-                colors1[0][i] = (this.colors[0][i] + this.colors[1][i])/2;
-                colors1[1][i] = this.colors[1][i];
-            }
-            var curve0 = new Curve(beziers[0], colors0),
-                curve1 = new Curve(beziers[1], colors1);
-            curve0.paint_curve(v, w);
-            curve1.paint_curve(v, w);
-        } else {
-            counter++;
-
-            // Directly write data
-            var x = Math.round(this.nodes[0].x),
-                y = Math.round(this.nodes[0].y);
-            if (x >= 0 && x < w) {
-                var index = (y * w + x) * 4;
-                v[index    ] = Math.round(this.colors[0][0]);
-                v[index + 1] = Math.round(this.colors[0][1]);
-                v[index + 2] = Math.round(this.colors[0][2]);
-                v[index + 3] = Math.round(this.colors[0][3]); // Alpha
-            }
-        }
-    };
-
-    // Patch class -------------------------------------
-    function Patch(nodes, colors) {
-        this.nodes = nodes;   // 4x4 array of points
-        this.colors = colors; // 2x2x4 colors (four corners x R+G+B+A)
+    for (i = 0; i < 4; ++i) {
+      colors0[0][0][i] = this.colors[0][0][i];
+      colors0[0][1][i] = this.colors[0][1][i];
+      colors0[1][0][i] = (this.colors[0][0][i] + this.colors[1][0][i]) / 2;
+      colors0[1][1][i] = (this.colors[0][1][i] + this.colors[1][1][i]) / 2;
+      colors1[0][0][i] = (this.colors[0][0][i] + this.colors[1][0][i]) / 2;
+      colors1[0][1][i] = (this.colors[0][1][i] + this.colors[1][1][i]) / 2;
+      colors1[1][0][i] = this.colors[1][0][i];
+      colors1[1][1][i] = this.colors[1][1][i];
     }
 
-    // Set path for future stroking or filling... useful for debugging.
-    Patch.prototype.setOutline = function(v) {
-        // Draw patch outline
-        v.beginPath();
-        v.moveTo( this.nodes[0][0].x, this.nodes[0][0].y );
-        v.bezierCurveTo( this.nodes[0][1].x, this.nodes[0][1].y,
-                 this.nodes[0][2].x, this.nodes[0][2].y,
-                 this.nodes[0][3].x, this.nodes[0][3].y );
-        v.bezierCurveTo( this.nodes[1][3].x, this.nodes[1][3].y,
-                 this.nodes[2][3].x, this.nodes[2][3].y,
-                 this.nodes[3][3].x, this.nodes[3][3].y );
-        v.bezierCurveTo( this.nodes[3][2].x, this.nodes[3][2].y,
-                 this.nodes[3][1].x, this.nodes[3][1].y,
-                 this.nodes[3][0].x, this.nodes[3][0].y );
-        v.bezierCurveTo( this.nodes[2][0].x, this.nodes[2][0].y,
-                 this.nodes[1][0].x, this.nodes[1][0].y,
-                 this.nodes[0][0].x, this.nodes[0][0].y );
-        v.closePath();
-    };
+    var patch0 = new Patch(nodes0, colors0),
+      patch1 = new Patch(nodes1, colors1);
 
-    // Draw stroke patch... useful if debugging.
-    Patch.prototype.drawOutline = function(v) {
-        this.setOutline(v);
-        v.strokeStyle = "black";
-        v.stroke();
-    };
+    return [patch0, patch1];
+  };
 
-    // Fill patch... useful if debugging.
-    Patch.prototype.fillOutline = function(v) {
-        this.setOutline(v);
-        v.fillStyle = colorToString( this.colors[0] );
-        v.fill();
-    };
+  Patch.prototype.paint = function (v, w) {
+    // Check if patch is inside canvas (need canvas dimensions)
+    // To be done.....
 
-    // Split patch horizontally into two patches.
-    Patch.prototype.split = function() {
-        var nodes0  = [[],[],[],[]],
-            nodes1  = [[],[],[],[]],
-            colors0 = [[[],[]],[[],[]]],
-            colors1 = [[[],[]],[[],[]]];
-
-        for (var i = 0; i < 4; ++i) {
-            var beziers = split_bezier(this.nodes[0][i], this.nodes[1][i], this.nodes[2][i], this.nodes[3][i]);
-
-            for (var j = 0; j < 4; ++j) {
-                nodes0[0][i] = beziers[0][0];
-                nodes0[1][i] = beziers[0][1];
-                nodes0[2][i] = beziers[0][2];
-                nodes0[3][i] = beziers[0][3];
-                nodes1[0][i] = beziers[1][0];
-                nodes1[1][i] = beziers[1][1];
-                nodes1[2][i] = beziers[1][2];
-                nodes1[3][i] = beziers[1][3];
-            }
-        }
-
-        for (i = 0; i < 4; ++ i) {
-            colors0[0][0][i] = this.colors[0][0][i];
-            colors0[0][1][i] = this.colors[0][1][i];
-            colors0[1][0][i] = (this.colors[0][0][i] + this.colors[1][0][i])/2;
-            colors0[1][1][i] = (this.colors[0][1][i] + this.colors[1][1][i])/2;
-            colors1[0][0][i] = (this.colors[0][0][i] + this.colors[1][0][i])/2;
-            colors1[0][1][i] = (this.colors[0][1][i] + this.colors[1][1][i])/2;
-            colors1[1][0][i] = this.colors[1][0][i];
-            colors1[1][1][i] = this.colors[1][1][i];
-        }
-
-        var patch0 = new Patch(nodes0, colors0),
-            patch1 = new Patch(nodes1, colors1);
-
-        return ([patch0, patch1]);
-    };
-
-    Patch.prototype.paint = function(v, w) {
-        // Check if patch is inside canvas (need canvas dimensions)
-        // To be done.....
-
-        // If inside, see if we need to split
-        var tmp = [];
+    // If inside, see if we need to split
+    var tmp = [];
 
-        for (var i = 0; i < 4; ++i) {
-            tmp[i] = bezier_steps_sq([this.nodes[0][i],this.nodes[1][i],
-                          this.nodes[2][i],this.nodes[3][i]]);
-        }
+    for (var i = 0; i < 4; ++i) {
+      tmp[i] = bezier_steps_sq([
+        this.nodes[0][i],
+        this.nodes[1][i],
+        this.nodes[2][i],
+        this.nodes[3][i],
+      ]);
+    }
 
-        var max = Math.max.apply(null,tmp);
+    var max = Math.max.apply(null, tmp);
 
-        if (max > 2.0) {  // Larger values leave holes, smaller take longer to render.
-            var patches = this.split();
-            patches[0].paint(v, w);
-            patches[1].paint(v, w);
-            } else {
-                //this.fillOutline(v);
-                this.paint_curve(v, w);
+    if (max > 2.0) {
+      // Larger values leave holes, smaller take longer to render.
+      var patches = this.split();
+      patches[0].paint(v, w);
+      patches[1].paint(v, w);
+    } else {
+      //this.fillOutline(v);
+      this.paint_curve(v, w);
+    }
+  };
+
+  Patch.prototype.paint_curve = function (v, w) {
+    // Paint a Bezier curve using just the top of the patch. If
+    // the patch is thin enough this should work. We leave this
+    // function here in case we want to do something more fancy.
+    var curve = new Curve(
+      [this.nodes[0][0], this.nodes[0][1], this.nodes[0][2], this.nodes[0][3]],
+      [this.colors[0][0], this.colors[0][1]],
+    );
+
+    curve.paint_curve(v, w);
+  };
+
+  // Mesh class ---------------------------------------
+  function Mesh(id) {
+    this.id = id;
+    var raw = this.readMesh(id);
+    this.nodes = raw.nodes; // (m*3+1) x (n*3+1) points
+    this.colors = raw.colors; // (m+1) x (n+1) x 4  colors (R+G+B+A)
+  }
+
+  // Weighted average to find Bezier points for linear sides.
+  function w_ave(p0, p1) {
+    var p = p0.scale(2.0 / 3.0).add(p1.scale(1.0 / 3.0));
+
+    return p;
+  }
+
+  // Function to parse an SVG mesh and return an array of nodes (points) and an array of colors.
+  Mesh.prototype.readMesh = function (id) {
+    var nodes = [],
+      colors = [],
+      i,
+      j;
+
+    // First, find the mesh
+    var theMesh = document.getElementById(id);
+
+    if (theMesh === null) {
+      console.log("mesh.js: Could not find mesh: " + id);
+    } else {
+      nodes[0] = []; // Top row
+      colors[0] = []; // Top row
+
+      var x = Number(theMesh.getAttribute("x")),
+        y = Number(theMesh.getAttribute("y"));
+
+      nodes[0][0] = new Point(x, y);
+
+      var rows = theMesh.children;
+
+      for (i = 0; i < rows.length; ++i) {
+        // Need to validate if meshrow...
+        nodes[3 * i + 1] = []; // Need three extra rows for each meshrow.
+        nodes[3 * i + 2] = [];
+        nodes[3 * i + 3] = [];
+        colors[i + 1] = []; // Need one more row than number of meshrows.
+
+        var patches = rows[i].children;
+
+        for (j = 0; j < patches.length; ++j) {
+          var stops = patches[j].children;
+
+          for (var k = 0; k < stops.length; ++k) {
+            var l = k,
+              parts;
+
+            if (i !== 0) {
+              ++l; // There is no top if row isn't first row.
             }
-        };
-
-        Patch.prototype.paint_curve = function(v, w) {
-            // Paint a Bezier curve using just the top of the patch. If
-            // the patch is thin enough this should work. We leave this
-            // function here in case we want to do something more fancy.
-            var curve = new Curve(
-                [this.nodes[0][0],this.nodes[0][1],this.nodes[0][2],this.nodes[0][3]],
-                [this.colors[0][0],this.colors[0][1]]);
-
-            curve.paint_curve(v, w);
-        };
-
-
-        // Mesh class ---------------------------------------
-        function Mesh(id) {
-            this.id = id;
-            var raw = this.readMesh(id);
-            this.nodes  = raw.nodes;  // (m*3+1) x (n*3+1) points
-            this.colors = raw.colors; // (m+1) x (n+1) x 4  colors (R+G+B+A)
-        }
 
-        // Weighted average to find Bezier points for linear sides.
-        function w_ave(p0, p1) {
-            var p = p0.scale(2.0/3.0).add(p1.scale(1.0/3.0));
+            var path = stops[k].getAttribute("path"),
+              type = "l"; // We need to still find mid-points even if no path.
 
-            return p;
-        }
+            if (path !== null) {
+              parts = path.match(/\s*([lLcC])\s*(.*)/);
+              type = parts[1];
+            }
+            var stop_nodes = parse_points(parts[2]);
 
-        // Function to parse an SVG mesh and return an array of nodes (points) and an array of colors.
-        Mesh.prototype.readMesh = function(id) {
-            var nodes  = [],
-                colors = [],
-                i,
-                j;
-
-            // First, find the mesh
-            var theMesh = document.getElementById(id);
-
-            if (theMesh === null) {
-                console.log( "mesh.js: Could not find mesh: " + id);
-            } else {
-                nodes[0]  = []; // Top row
-                colors[0] = []; // Top row
-
-                var x = Number(theMesh.getAttribute("x")),
-                    y = Number(theMesh.getAttribute("y"));
-
-                nodes[0][0] = new Point(x, y);
-
-                var rows = theMesh.children;
-
-                for (i = 0; i < rows.length; ++i) {
-                    // Need to validate if meshrow...
-                    nodes[3*i+1] = []; // Need three extra rows for each meshrow.
-                    nodes[3*i+2] = [];
-                    nodes[3*i+3] = [];
-                    colors[i+1] = []; // Need one more row than number of meshrows.
-
-                    var patches = rows[i].children;
-
-                    for (j = 0; j < patches.length; ++j) {
-                        var stops = patches[j].children;
-
-                        for (var k = 0; k < stops.length; ++k) {
-                            var l = k,
-                                parts;
-
-                            if (i !== 0) {
-                                ++l; // There is no top if row isn't first row.
-                            }
-
-                            var path = stops[k].getAttribute("path"),
-                                type = "l"; // We need to still find mid-points even if no path.
-
-                            if (path !== null) {
-                                parts = path.match(/\s*([lLcC])\s*(.*)/);
-                                type = parts[1];
-                            }
-                            var stop_nodes = parse_points( parts[2] );
-
-                            switch (type) {
-                                case "l":
-                                    if (l === 0) { // Top
-                                        nodes[3*i][3*j+3] = stop_nodes[0].add(nodes[3*i][3*j]);
-                                        nodes[3*i][3*j+1] = w_ave( nodes[3*i][3*j], nodes[3*i][3*j+3] );
-                                        nodes[3*i][3*j+2] = w_ave( nodes[3*i][3*j+3], nodes[3*i][3*j] );
-                                    } else if (l == 1) { // Right
-                                        nodes[3*i+3][3*j+3] = stop_nodes[0].add(nodes[3*i][3*j+3]);
-                                        nodes[3*i+1][3*j+3] = w_ave( nodes[3*i][3*j+3], nodes[3*i+3][3*j+3] );
-                                        nodes[3*i+2][3*j+3] = w_ave( nodes[3*i+3][3*j+3], nodes[3*i][3*j+3] );
-                                    } else if (l == 2) { // Bottom
-                                        if(j===0) {
-                                            nodes[3*i+3][3*j+0] = stop_nodes[0].add(nodes[3*i+3][3*j+3]);
-                                        }
-                                        nodes[3*i+3][3*j+1] = w_ave( nodes[3*i+3][3*j], nodes[3*i+3][3*j+3] );
-                                        nodes[3*i+3][3*j+2] = w_ave( nodes[3*i+3][3*j+3], nodes[3*i+3][3*j] );
-                                    } else { // Left
-                                        nodes[3*i+1][3*j] = w_ave( nodes[3*i][3*j], nodes[3*i+3][3*j] );
-                                        nodes[3*i+2][3*j] = w_ave( nodes[3*i+3][3*j], nodes[3*i][3*j] );
-                                    }
-
-                                    break;
-
-                                case "L":
-                                    if (l === 0) { // Top
-                                        nodes[3*i][3*j+3] = stop_nodes[0];
-                                        nodes[3*i][3*j+1] = w_ave( nodes[3*i][3*j], nodes[3*i][3*j+3] );
-                                        nodes[3*i][3*j+2] = w_ave( nodes[3*i][3*j+3], nodes[3*i][3*j] );
-                                    } else if (l === 1) { // Right
-                                        nodes[3*i+3][3*j+3] = stop_nodes[0];
-                                        nodes[3*i+1][3*j+3] = w_ave( nodes[3*i][3*j+3], nodes[3*i+3][3*j+3] );
-                                        nodes[3*i+2][3*j+3] = w_ave( nodes[3*i+3][3*j+3], nodes[3*i][3*j+3] );
-                                    } else if (l === 2) { // Bottom
-                                        if(j === 0) {
-                                            nodes[3*i+3][3*j+0] = stop_nodes[0];
-                                        }
-                                        nodes[3*i+3][3*j+1] = w_ave( nodes[3*i+3][3*j], nodes[3*i+3][3*j+3] );
-                                        nodes[3*i+3][3*j+2] = w_ave( nodes[3*i+3][3*j+3], nodes[3*i+3][3*j] );
-                                    } else { // Left
-                                        nodes[3*i+1][3*j] = w_ave( nodes[3*i][3*j], nodes[3*i+3][3*j] );
-                                        nodes[3*i+2][3*j] = w_ave( nodes[3*i+3][3*j], nodes[3*i][3*j] );
-                                    }
-
-                                    break;
-
-                                case "c":
-                                    if (l === 0) { // Top
-                                        nodes[3*i][3*j+1] = stop_nodes[0].add(nodes[3*i][3*j]);
-                                        nodes[3*i][3*j+2] = stop_nodes[1].add(nodes[3*i][3*j]);
-                                        nodes[3*i][3*j+3] = stop_nodes[2].add(nodes[3*i][3*j]);
-                                    } else if (l === 1) { // Right
-                                        nodes[3*i+1][3*j+3] = stop_nodes[0].add(nodes[3*i][3*j+3]);
-                                        nodes[3*i+2][3*j+3] = stop_nodes[1].add(nodes[3*i][3*j+3]);
-                                        nodes[3*i+3][3*j+3] = stop_nodes[2].add(nodes[3*i][3*j+3]);
-                                    } else if (l === 2) { // Bottom
-                                        nodes[3*i+3][3*j+2] = stop_nodes[0].add(nodes[3*i+3][3*j+3]);
-                                        nodes[3*i+3][3*j+1] = stop_nodes[1].add(nodes[3*i+3][3*j+3]);
-                                        if(j === 0) {
-                                            nodes[3*i+3][3*j+0] = stop_nodes[2].add(nodes[3*i+3][3*j+3]);
-                                        }
-                                    } else { // Left
-                                        nodes[3*i+2][3*j] = stop_nodes[0].add(nodes[3*i+3][3*j]);
-                                        nodes[3*i+1][3*j] = stop_nodes[1].add(nodes[3*i+3][3*j]);
-                                    }
-
-                                    break;
-
-                                case "C":
-                                    if (l === 0) { // Top
-                                        nodes[3*i][3*j+1] = stop_nodes[0];
-                                        nodes[3*i][3*j+2] = stop_nodes[1];
-                                        nodes[3*i][3*j+3] = stop_nodes[2];
-                                    } else if (l == 1) { // Right
-                                        nodes[3*i+1][3*j+3] = stop_nodes[0];
-                                        nodes[3*i+2][3*j+3] = stop_nodes[1];
-                                        nodes[3*i+3][3*j+3] = stop_nodes[2];
-                                    } else if (l == 2) { // Bottom
-                                        nodes[3*i+3][3*j+2] = stop_nodes[0];
-                                        nodes[3*i+3][3*j+1] = stop_nodes[1];
-                                        if(j === 0) {
-                                            nodes[3*i+3][3*j+0] = stop_nodes[2];
-                                        }
-                                    } else { // Left
-                                        nodes[3*i+2][3*j] = stop_nodes[0];
-                                        nodes[3*i+1][3*j] = stop_nodes[1];
-                                    }
-
-                                    break;
-
-                                default:
-                                    console.log("mesh.js: " + type + " invalid path type.");
-                            }
-
-                            if ((i === 0 && j === 0) || k > 0) {
-                                var color_raw = getComputedStyle(stops[k]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),
-                                    alpha_raw = getComputedStyle(stops[k]).stopOpacity,
-                                    alpha = 255;
-
-                                if (alpha_raw) {
-                                    alpha = parseInt(alpha_raw * 255);
-                                }
-
-                                if (color_raw) {
-                                    if (l === 0) { // upper left corner
-                                        colors[i][j] = [];
-                                        colors[i][j][0] = parseInt(color_raw[1]);
-                                        colors[i][j][1] = parseInt(color_raw[2]);
-                                        colors[i][j][2] = parseInt(color_raw[3]);
-                                        colors[i][j][3] = alpha; // Alpha
-                                    } else if (l === 1) { // upper right corner
-                                        colors[i][j+1] = [];
-                                        colors[i][j+1][0] = parseInt(color_raw[1]);
-                                        colors[i][j+1][1] = parseInt(color_raw[2]);
-                                        colors[i][j+1][2] = parseInt(color_raw[3]);
-                                        colors[i][j+1][3] = alpha; // Alpha
-                                    } else if (l === 2) { // lower right corner
-                                        colors[i+1][j+1] = [];
-                                        colors[i+1][j+1][0] = parseInt(color_raw[1]);
-                                        colors[i+1][j+1][1] = parseInt(color_raw[2]);
-                                        colors[i+1][j+1][2] = parseInt(color_raw[3]);
-                                        colors[i+1][j+1][3] = alpha; // Alpha
-                                    } else if (l === 3) { // lower left corner
-                                        colors[i+1][j] = [];
-                                        colors[i+1][j][0] = parseInt(color_raw[1]);
-                                        colors[i+1][j][1] = parseInt(color_raw[2]);
-                                        colors[i+1][j][2] = parseInt(color_raw[3]);
-                                        colors[i+1][j][3] = alpha; // Alpha
-                                    }
-                                }
-                            }
-                        }
-
-                    // SVG doesn't use tensor points but we need them for rendering.
-                    nodes[3*i+1][3*j+1] = new Point();
-                    nodes[3*i+1][3*j+2] = new Point();
-                    nodes[3*i+2][3*j+1] = new Point();
-                    nodes[3*i+2][3*j+2] = new Point();
-
-                    nodes[3*i+1][3*j+1].x =
-                        ( -4.0 *  nodes[3*i  ][3*j  ].x +
-                           6.0 * (nodes[3*i  ][3*j+1].x + nodes[3*i+1][3*j  ].x) +
-                          -2.0 * (nodes[3*i  ][3*j+3].x + nodes[3*i+3][3*j  ].x) +
-                           3.0 * (nodes[3*i+3][3*j+1].x + nodes[3*i+1][3*j+3].x) +
-                          -1.0 *  nodes[3*i+3][3*j+3].x ) / 9.0;
-                    nodes[3*i+1][3*j+2].x =
-                        ( -4.0 *  nodes[3*i  ][3*j+3].x +
-                           6.0 * (nodes[3*i  ][3*j+2].x + nodes[3*i+1][3*j+3].x) +
-                          -2.0 * (nodes[3*i  ][3*j  ].x + nodes[3*i+3][3*j+3].x) +
-                           3.0 * (nodes[3*i+3][3*j+2].x + nodes[3*i+1][3*j  ].x) +
-                          -1.0 *  nodes[3*i+3][3*j  ].x ) / 9.0;
-                    nodes[3*i+2][3*j+1].x =
-                        ( -4.0 *  nodes[3*i+3][3*j  ].x +
-                           6.0 * (nodes[3*i+3][3*j+1].x + nodes[3*i+2][3*j  ].x) +
-                          -2.0 * (nodes[3*i+3][3*j+3].x + nodes[3*i  ][3*j  ].x) +
-                           3.0 * (nodes[3*i  ][3*j+1].x + nodes[3*i+2][3*j+3].x) +
-                          -1.0 *  nodes[3*i  ][3*j+3].x ) / 9.0;
-                    nodes[3*i+2][3*j+2].x =
-                        ( -4.0 *  nodes[3*i+3][3*j+3].x +
-                           6.0 * (nodes[3*i+3][3*j+2].x + nodes[3*i+2][3*j+3].x) +
-                          -2.0 * (nodes[3*i+3][3*j  ].x + nodes[3*i  ][3*j+3].x) +
-                           3.0 * (nodes[3*i  ][3*j+2].x + nodes[3*i+2][3*j  ].x) +
-                          -1.0 *  nodes[3*i  ][3*j  ].x ) / 9.0;
-
-                    nodes[3*i+1][3*j+1].y =
-                        ( -4.0 *  nodes[3*i  ][3*j  ].y +
-                           6.0 * (nodes[3*i  ][3*j+1].y + nodes[3*i+1][3*j  ].y) +
-                          -2.0 * (nodes[3*i  ][3*j+3].y + nodes[3*i+3][3*j  ].y) +
-                           3.0 * (nodes[3*i+3][3*j+1].y + nodes[3*i+1][3*j+3].y) +
-                          -1.0 *  nodes[3*i+3][3*j+3].y ) / 9.0;
-                    nodes[3*i+1][3*j+2].y =
-                        ( -4.0 *  nodes[3*i  ][3*j+3].y +
-                           6.0 * (nodes[3*i  ][3*j+2].y + nodes[3*i+1][3*j+3].y) +
-                          -2.0 * (nodes[3*i  ][3*j  ].y + nodes[3*i+3][3*j+3].y) +
-                           3.0 * (nodes[3*i+3][3*j+2].y + nodes[3*i+1][3*j  ].y) +
-                          -1.0 *  nodes[3*i+3][3*j  ].y ) / 9.0;
-                    nodes[3*i+2][3*j+1].y =
-                        ( -4.0 *  nodes[3*i+3][3*j  ].y +
-                           6.0 * (nodes[3*i+3][3*j+1].y + nodes[3*i+2][3*j  ].y) +
-                          -2.0 * (nodes[3*i+3][3*j+3].y + nodes[3*i  ][3*j  ].y) +
-                           3.0 * (nodes[3*i  ][3*j+1].y + nodes[3*i+2][3*j+3].y) +
-                          -1.0 *  nodes[3*i  ][3*j+3].y ) / 9.0;
-                    nodes[3*i+2][3*j+2].y =
-                        ( -4.0 *  nodes[3*i+3][3*j+3].y +
-                           6.0 * (nodes[3*i+3][3*j+2].y + nodes[3*i+2][3*j+3].y) +
-                          -2.0 * (nodes[3*i+3][3*j  ].y + nodes[3*i  ][3*j+3].y) +
-                           3.0 * (nodes[3*i  ][3*j+2].y + nodes[3*i+2][3*j  ].y) +
-                          -1.0 *  nodes[3*i  ][3*j  ].y ) / 9.0;
+            switch (type) {
+              case "l":
+                if (l === 0) {
+                  // Top
+                  nodes[3 * i][3 * j + 3] = stop_nodes[0].add(
+                    nodes[3 * i][3 * j],
+                  );
+                  nodes[3 * i][3 * j + 1] = w_ave(
+                    nodes[3 * i][3 * j],
+                    nodes[3 * i][3 * j + 3],
+                  );
+                  nodes[3 * i][3 * j + 2] = w_ave(
+                    nodes[3 * i][3 * j + 3],
+                    nodes[3 * i][3 * j],
+                  );
+                } else if (l == 1) {
+                  // Right
+                  nodes[3 * i + 3][3 * j + 3] = stop_nodes[0].add(
+                    nodes[3 * i][3 * j + 3],
+                  );
+                  nodes[3 * i + 1][3 * j + 3] = w_ave(
+                    nodes[3 * i][3 * j + 3],
+                    nodes[3 * i + 3][3 * j + 3],
+                  );
+                  nodes[3 * i + 2][3 * j + 3] = w_ave(
+                    nodes[3 * i + 3][3 * j + 3],
+                    nodes[3 * i][3 * j + 3],
+                  );
+                } else if (l == 2) {
+                  // Bottom
+                  if (j === 0) {
+                    nodes[3 * i + 3][3 * j + 0] = stop_nodes[0].add(
+                      nodes[3 * i + 3][3 * j + 3],
+                    );
+                  }
+                  nodes[3 * i + 3][3 * j + 1] = w_ave(
+                    nodes[3 * i + 3][3 * j],
+                    nodes[3 * i + 3][3 * j + 3],
+                  );
+                  nodes[3 * i + 3][3 * j + 2] = w_ave(
+                    nodes[3 * i + 3][3 * j + 3],
+                    nodes[3 * i + 3][3 * j],
+                  );
+                } else {
+                  // Left
+                  nodes[3 * i + 1][3 * j] = w_ave(
+                    nodes[3 * i][3 * j],
+                    nodes[3 * i + 3][3 * j],
+                  );
+                  nodes[3 * i + 2][3 * j] = w_ave(
+                    nodes[3 * i + 3][3 * j],
+                    nodes[3 * i][3 * j],
+                  );
+                }
 
+                break;
+
+              case "L":
+                if (l === 0) {
+                  // Top
+                  nodes[3 * i][3 * j + 3] = stop_nodes[0];
+                  nodes[3 * i][3 * j + 1] = w_ave(
+                    nodes[3 * i][3 * j],
+                    nodes[3 * i][3 * j + 3],
+                  );
+                  nodes[3 * i][3 * j + 2] = w_ave(
+                    nodes[3 * i][3 * j + 3],
+                    nodes[3 * i][3 * j],
+                  );
+                } else if (l === 1) {
+                  // Right
+                  nodes[3 * i + 3][3 * j + 3] = stop_nodes[0];
+                  nodes[3 * i + 1][3 * j + 3] = w_ave(
+                    nodes[3 * i][3 * j + 3],
+                    nodes[3 * i + 3][3 * j + 3],
+                  );
+                  nodes[3 * i + 2][3 * j + 3] = w_ave(
+                    nodes[3 * i + 3][3 * j + 3],
+                    nodes[3 * i][3 * j + 3],
+                  );
+                } else if (l === 2) {
+                  // Bottom
+                  if (j === 0) {
+                    nodes[3 * i + 3][3 * j + 0] = stop_nodes[0];
+                  }
+                  nodes[3 * i + 3][3 * j + 1] = w_ave(
+                    nodes[3 * i + 3][3 * j],
+                    nodes[3 * i + 3][3 * j + 3],
+                  );
+                  nodes[3 * i + 3][3 * j + 2] = w_ave(
+                    nodes[3 * i + 3][3 * j + 3],
+                    nodes[3 * i + 3][3 * j],
+                  );
+                } else {
+                  // Left
+                  nodes[3 * i + 1][3 * j] = w_ave(
+                    nodes[3 * i][3 * j],
+                    nodes[3 * i + 3][3 * j],
+                  );
+                  nodes[3 * i + 2][3 * j] = w_ave(
+                    nodes[3 * i + 3][3 * j],
+                    nodes[3 * i][3 * j],
+                  );
                 }
-            }
-        }
-        return {
-            nodes: nodes,
-            colors: colors
-        };
-    };
 
-    // Extracts out each patch and then paints it
-    Mesh.prototype.paint = function(v, w) {
-        for (var i = 0; i < (this.nodes.length-1)/3; ++i) {
-            for (var j = 0; j < (this.nodes[0].length-1)/3; ++j) {
+                break;
+
+              case "c":
+                if (l === 0) {
+                  // Top
+                  nodes[3 * i][3 * j + 1] = stop_nodes[0].add(
+                    nodes[3 * i][3 * j],
+                  );
+                  nodes[3 * i][3 * j + 2] = stop_nodes[1].add(
+                    nodes[3 * i][3 * j],
+                  );
+                  nodes[3 * i][3 * j + 3] = stop_nodes[2].add(
+                    nodes[3 * i][3 * j],
+                  );
+                } else if (l === 1) {
+                  // Right
+                  nodes[3 * i + 1][3 * j + 3] = stop_nodes[0].add(
+                    nodes[3 * i][3 * j + 3],
+                  );
+                  nodes[3 * i + 2][3 * j + 3] = stop_nodes[1].add(
+                    nodes[3 * i][3 * j + 3],
+                  );
+                  nodes[3 * i + 3][3 * j + 3] = stop_nodes[2].add(
+                    nodes[3 * i][3 * j + 3],
+                  );
+                } else if (l === 2) {
+                  // Bottom
+                  nodes[3 * i + 3][3 * j + 2] = stop_nodes[0].add(
+                    nodes[3 * i + 3][3 * j + 3],
+                  );
+                  nodes[3 * i + 3][3 * j + 1] = stop_nodes[1].add(
+                    nodes[3 * i + 3][3 * j + 3],
+                  );
+                  if (j === 0) {
+                    nodes[3 * i + 3][3 * j + 0] = stop_nodes[2].add(
+                      nodes[3 * i + 3][3 * j + 3],
+                    );
+                  }
+                } else {
+                  // Left
+                  nodes[3 * i + 2][3 * j] = stop_nodes[0].add(
+                    nodes[3 * i + 3][3 * j],
+                  );
+                  nodes[3 * i + 1][3 * j] = stop_nodes[1].add(
+                    nodes[3 * i + 3][3 * j],
+                  );
+                }
 
-                var slice_nodes = [];
-                for (var k = i*3; k < (i*3)+4; ++k) {
-                    slice_nodes.push(this.nodes[k].slice(j*3,(j*3)+4));
+                break;
+
+              case "C":
+                if (l === 0) {
+                  // Top
+                  nodes[3 * i][3 * j + 1] = stop_nodes[0];
+                  nodes[3 * i][3 * j + 2] = stop_nodes[1];
+                  nodes[3 * i][3 * j + 3] = stop_nodes[2];
+                } else if (l == 1) {
+                  // Right
+                  nodes[3 * i + 1][3 * j + 3] = stop_nodes[0];
+                  nodes[3 * i + 2][3 * j + 3] = stop_nodes[1];
+                  nodes[3 * i + 3][3 * j + 3] = stop_nodes[2];
+                } else if (l == 2) {
+                  // Bottom
+                  nodes[3 * i + 3][3 * j + 2] = stop_nodes[0];
+                  nodes[3 * i + 3][3 * j + 1] = stop_nodes[1];
+                  if (j === 0) {
+                    nodes[3 * i + 3][3 * j + 0] = stop_nodes[2];
+                  }
+                } else {
+                  // Left
+                  nodes[3 * i + 2][3 * j] = stop_nodes[0];
+                  nodes[3 * i + 1][3 * j] = stop_nodes[1];
                 }
 
-                var slice_colors = [];
-                slice_colors.push(this.colors[i  ].slice(j,j+2));
-                slice_colors.push(this.colors[i+1].slice(j,j+2));
+                break;
 
-                var patch = new Patch(slice_nodes, slice_colors);
-                patch.paint(v, w);
+              default:
+                console.log("mesh.js: " + type + " invalid path type.");
             }
-        }
-    };
 
-    // Transforms mesh into coordinate space of canvas (t is either Point or Affine).
-    Mesh.prototype.transform = function(t) {
-        var i,
-            j;
-        if (t instanceof Point) {
-            for (i = 0; i < this.nodes.length; ++i) {
-                for (j = 0; j < this.nodes[0].length; ++j) {
-                    this.nodes[i][j] = this.nodes[i][j].add(t);
-                }
-            }
-        }
-        if (t instanceof Affine) {
-            for (i = 0; i < this.nodes.length; ++i) {
-                for (j = 0; j < this.nodes[0].length; ++j) {
-                    this.nodes[i][j] = this.nodes[i][j].transform(t);
+            if ((i === 0 && j === 0) || k > 0) {
+              var color_raw = getComputedStyle(stops[k]).stopColor.match(
+                  /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i,
+                ),
+                alpha_raw = getComputedStyle(stops[k]).stopOpacity,
+                alpha = 255;
+
+              if (alpha_raw) {
+                alpha = parseInt(alpha_raw * 255);
+              }
+
+              if (color_raw) {
+                if (l === 0) {
+                  // upper left corner
+                  colors[i][j] = [];
+                  colors[i][j][0] = parseInt(color_raw[1]);
+                  colors[i][j][1] = parseInt(color_raw[2]);
+                  colors[i][j][2] = parseInt(color_raw[3]);
+                  colors[i][j][3] = alpha; // Alpha
+                } else if (l === 1) {
+                  // upper right corner
+                  colors[i][j + 1] = [];
+                  colors[i][j + 1][0] = parseInt(color_raw[1]);
+                  colors[i][j + 1][1] = parseInt(color_raw[2]);
+                  colors[i][j + 1][2] = parseInt(color_raw[3]);
+                  colors[i][j + 1][3] = alpha; // Alpha
+                } else if (l === 2) {
+                  // lower right corner
+                  colors[i + 1][j + 1] = [];
+                  colors[i + 1][j + 1][0] = parseInt(color_raw[1]);
+                  colors[i + 1][j + 1][1] = parseInt(color_raw[2]);
+                  colors[i + 1][j + 1][2] = parseInt(color_raw[3]);
+                  colors[i + 1][j + 1][3] = alpha; // Alpha
+                } else if (l === 3) {
+                  // lower left corner
+                  colors[i + 1][j] = [];
+                  colors[i + 1][j][0] = parseInt(color_raw[1]);
+                  colors[i + 1][j][1] = parseInt(color_raw[2]);
+                  colors[i + 1][j][2] = parseInt(color_raw[3]);
+                  colors[i + 1][j][3] = alpha; // Alpha
                 }
+              }
             }
+          }
+
+          // SVG doesn't use tensor points but we need them for rendering.
+          nodes[3 * i + 1][3 * j + 1] = new Point();
+          nodes[3 * i + 1][3 * j + 2] = new Point();
+          nodes[3 * i + 2][3 * j + 1] = new Point();
+          nodes[3 * i + 2][3 * j + 2] = new Point();
+
+          nodes[3 * i + 1][3 * j + 1].x =
+            (-4.0 * nodes[3 * i][3 * j].x +
+              6.0 * (nodes[3 * i][3 * j + 1].x + nodes[3 * i + 1][3 * j].x) +
+              -2.0 * (nodes[3 * i][3 * j + 3].x + nodes[3 * i + 3][3 * j].x) +
+              3.0 *
+                (nodes[3 * i + 3][3 * j + 1].x +
+                  nodes[3 * i + 1][3 * j + 3].x) +
+              -1.0 * nodes[3 * i + 3][3 * j + 3].x) /
+            9.0;
+          nodes[3 * i + 1][3 * j + 2].x =
+            (-4.0 * nodes[3 * i][3 * j + 3].x +
+              6.0 *
+                (nodes[3 * i][3 * j + 2].x + nodes[3 * i + 1][3 * j + 3].x) +
+              -2.0 * (nodes[3 * i][3 * j].x + nodes[3 * i + 3][3 * j + 3].x) +
+              3.0 *
+                (nodes[3 * i + 3][3 * j + 2].x + nodes[3 * i + 1][3 * j].x) +
+              -1.0 * nodes[3 * i + 3][3 * j].x) /
+            9.0;
+          nodes[3 * i + 2][3 * j + 1].x =
+            (-4.0 * nodes[3 * i + 3][3 * j].x +
+              6.0 *
+                (nodes[3 * i + 3][3 * j + 1].x + nodes[3 * i + 2][3 * j].x) +
+              -2.0 * (nodes[3 * i + 3][3 * j + 3].x + nodes[3 * i][3 * j].x) +
+              3.0 *
+                (nodes[3 * i][3 * j + 1].x + nodes[3 * i + 2][3 * j + 3].x) +
+              -1.0 * nodes[3 * i][3 * j + 3].x) /
+            9.0;
+          nodes[3 * i + 2][3 * j + 2].x =
+            (-4.0 * nodes[3 * i + 3][3 * j + 3].x +
+              6.0 *
+                (nodes[3 * i + 3][3 * j + 2].x +
+                  nodes[3 * i + 2][3 * j + 3].x) +
+              -2.0 * (nodes[3 * i + 3][3 * j].x + nodes[3 * i][3 * j + 3].x) +
+              3.0 * (nodes[3 * i][3 * j + 2].x + nodes[3 * i + 2][3 * j].x) +
+              -1.0 * nodes[3 * i][3 * j].x) /
+            9.0;
+
+          nodes[3 * i + 1][3 * j + 1].y =
+            (-4.0 * nodes[3 * i][3 * j].y +
+              6.0 * (nodes[3 * i][3 * j + 1].y + nodes[3 * i + 1][3 * j].y) +
+              -2.0 * (nodes[3 * i][3 * j + 3].y + nodes[3 * i + 3][3 * j].y) +
+              3.0 *
+                (nodes[3 * i + 3][3 * j + 1].y +
+                  nodes[3 * i + 1][3 * j + 3].y) +
+              -1.0 * nodes[3 * i + 3][3 * j + 3].y) /
+            9.0;
+          nodes[3 * i + 1][3 * j + 2].y =
+            (-4.0 * nodes[3 * i][3 * j + 3].y +
+              6.0 *
+                (nodes[3 * i][3 * j + 2].y + nodes[3 * i + 1][3 * j + 3].y) +
+              -2.0 * (nodes[3 * i][3 * j].y + nodes[3 * i + 3][3 * j + 3].y) +
+              3.0 *
+                (nodes[3 * i + 3][3 * j + 2].y + nodes[3 * i + 1][3 * j].y) +
+              -1.0 * nodes[3 * i + 3][3 * j].y) /
+            9.0;
+          nodes[3 * i + 2][3 * j + 1].y =
+            (-4.0 * nodes[3 * i + 3][3 * j].y +
+              6.0 *
+                (nodes[3 * i + 3][3 * j + 1].y + nodes[3 * i + 2][3 * j].y) +
+              -2.0 * (nodes[3 * i + 3][3 * j + 3].y + nodes[3 * i][3 * j].y) +
+              3.0 *
+                (nodes[3 * i][3 * j + 1].y + nodes[3 * i + 2][3 * j + 3].y) +
+              -1.0 * nodes[3 * i][3 * j + 3].y) /
+            9.0;
+          nodes[3 * i + 2][3 * j + 2].y =
+            (-4.0 * nodes[3 * i + 3][3 * j + 3].y +
+              6.0 *
+                (nodes[3 * i + 3][3 * j + 2].y +
+                  nodes[3 * i + 2][3 * j + 3].y) +
+              -2.0 * (nodes[3 * i + 3][3 * j].y + nodes[3 * i][3 * j + 3].y) +
+              3.0 * (nodes[3 * i][3 * j + 2].y + nodes[3 * i + 2][3 * j].y) +
+              -1.0 * nodes[3 * i][3 * j].y) /
+            9.0;
         }
+      }
+    }
+    return {
+      nodes: nodes,
+      colors: colors,
     };
-
-    // Scale mesh into coordinate space of canvas (t is a Point).
-    Mesh.prototype.scale = function(t) {
-        var i,
-            j;
-        for (i = 0; i < this.nodes.length; ++i) {
-            for (j = 0; j < this.nodes[0].length; ++j) {
-                this.nodes[i][j] = this.nodes[i][j].scale(t);
-            }
+  };
+
+  // Extracts out each patch and then paints it
+  Mesh.prototype.paint = function (v, w) {
+    for (var i = 0; i < (this.nodes.length - 1) / 3; ++i) {
+      for (var j = 0; j < (this.nodes[0].length - 1) / 3; ++j) {
+        var slice_nodes = [];
+        for (var k = i * 3; k < i * 3 + 4; ++k) {
+          slice_nodes.push(this.nodes[k].slice(j * 3, j * 3 + 4));
         }
-    };
 
-    function parse_points(s) {
-        var points = [],
-            values = s.split(/[ ,]+/),
-            i;
-        for (i = 0; i < values.length-1; i += 2) {
-            points.push( new Point( parseFloat( values[i]), parseFloat( values[i+1] )));
-        }
+        var slice_colors = [];
+        slice_colors.push(this.colors[i].slice(j, j + 2));
+        slice_colors.push(this.colors[i + 1].slice(j, j + 2));
 
-        return points;
+        var patch = new Patch(slice_nodes, slice_colors);
+        patch.paint(v, w);
+      }
+    }
+  };
+
+  // Transforms mesh into coordinate space of canvas (t is either Point or Affine).
+  Mesh.prototype.transform = function (t) {
+    var i, j;
+    if (t instanceof Point) {
+      for (i = 0; i < this.nodes.length; ++i) {
+        for (j = 0; j < this.nodes[0].length; ++j) {
+          this.nodes[i][j] = this.nodes[i][j].add(t);
+        }
+      }
+    }
+    if (t instanceof Affine) {
+      for (i = 0; i < this.nodes.length; ++i) {
+        for (j = 0; j < this.nodes[0].length; ++j) {
+          this.nodes[i][j] = this.nodes[i][j].transform(t);
+        }
+      }
+    }
+  };
+
+  // Scale mesh into coordinate space of canvas (t is a Point).
+  Mesh.prototype.scale = function (t) {
+    var i, j;
+    for (i = 0; i < this.nodes.length; ++i) {
+      for (j = 0; j < this.nodes[0].length; ++j) {
+        this.nodes[i][j] = this.nodes[i][j].scale(t);
+      }
+    }
+  };
+
+  function parse_points(s) {
+    var points = [],
+      values = s.split(/[ ,]+/),
+      i;
+    for (i = 0; i < values.length - 1; i += 2) {
+      points.push(new Point(parseFloat(values[i]), parseFloat(values[i + 1])));
     }
 
-    // Start of document processing ---------------------
-    var shapes = document.querySelectorAll('rect,circle,ellipse,path,text');
+    return points;
+  }
 
-    for (i = 0; i < shapes.length; ++i) {
-        var shape = shapes[i];
-        // Get id. If no id, create one.
-        var shape_id = shape.getAttribute("id");
+  // Start of document processing ---------------------
+  var shapes = document.querySelectorAll("rect,circle,ellipse,path,text");
 
-        if (!shape_id) {
-            shape_id = "patchjs_shape" + i;
-            shape.setAttribute("id", shape_id);
-        }
+  for (i = 0; i < shapes.length; ++i) {
+    var shape = shapes[i];
+    // Get id. If no id, create one.
+    var shape_id = shape.getAttribute("id");
 
-        var fill = shape.style.fill,
-            url_value = fill.match(/^url\(\s*\"?\s*#([^\s\"]+)\"?\s*\)/);
+    if (!shape_id) {
+      shape_id = "patchjs_shape" + i;
+      shape.setAttribute("id", shape_id);
+    }
 
-        if (url_value && url_value[1]) {
-            var mesh = document.getElementById(url_value[1]);
+    var fill = shape.style.fill,
+      url_value = fill.match(/^url\(\s*\"?\s*#([^\s\"]+)\"?\s*\)/);
 
-            if (mesh.nodeName === "meshgradient" ) {
-                var bbox = shape.getBBox();
+    if (url_value && url_value[1]) {
+      var mesh = document.getElementById(url_value[1]);
 
-                // Create temporary canvas
-                var my_canvas = document.createElementNS( xhtmlNS, "canvas" );
-                my_canvas.width = bbox.width;
-                my_canvas.height = bbox.height;
+      if (mesh.nodeName === "meshgradient") {
+        var bbox = shape.getBBox();
 
-                var my_context = my_canvas.getContext("2d"),
-                    my_canvas_image = my_context.getImageData( 0, 0, my_canvas.width, my_canvas.height),
-                    my_data = my_canvas_image.data;
+        // Create temporary canvas
+        var my_canvas = document.createElementNS(xhtmlNS, "canvas");
+        my_canvas.width = bbox.width;
+        my_canvas.height = bbox.height;
 
-                // Draw a mesh
-                var my_mesh = new Mesh( url_value[1] );
+        var my_context = my_canvas.getContext("2d"),
+          my_canvas_image = my_context.getImageData(
+            0,
+            0,
+            my_canvas.width,
+            my_canvas.height,
+          ),
+          my_data = my_canvas_image.data;
 
-                // Adjust for bounding box if necessary.
-                if (mesh.getAttribute( "gradientUnits" ) === "objectBoundingBox") {
-                    my_mesh.scale( new Point( bbox.width, bbox.height ) );
-                }
+        // Draw a mesh
+        var my_mesh = new Mesh(url_value[1]);
 
-                // Apply gradient transform.
-                var gradientTransform = mesh.getAttribute("gradientTransform");
+        // Adjust for bounding box if necessary.
+        if (mesh.getAttribute("gradientUnits") === "objectBoundingBox") {
+          my_mesh.scale(new Point(bbox.width, bbox.height));
+        }
 
-                if (gradientTransform !== null) {
-                    var affine = parseTransform(gradientTransform);
-                    my_mesh.transform(affine);
-                }
+        // Apply gradient transform.
+        var gradientTransform = mesh.getAttribute("gradientTransform");
 
-                // Position to Canvas coordinate.
-                var t = new Point(-bbox.x, -bbox.y);
+        if (gradientTransform !== null) {
+          var affine = parseTransform(gradientTransform);
+          my_mesh.transform(affine);
+        }
 
-                if (mesh.getAttribute( "gradientUnits" ) === "userSpaceOnUse") {
-                    my_mesh.transform(t);
-                }
+        // Position to Canvas coordinate.
+        var t = new Point(-bbox.x, -bbox.y);
+
+        if (mesh.getAttribute("gradientUnits") === "userSpaceOnUse") {
+          my_mesh.transform(t);
+        }
 
-                // Paint
-                my_mesh.paint(my_data, my_canvas.width);
+        // Paint
+        my_mesh.paint(my_data, my_canvas.width);
 
-                my_context.putImageData(my_canvas_image, 0, 0);
+        my_context.putImageData(my_canvas_image, 0, 0);
 
-                // Create image element of correct size
-                var my_image = document.createElementNS( svgNS, "image" );
-                my_image.setAttribute("width", my_canvas.width);
-                my_image.setAttribute("height",my_canvas.height);
-                my_image.setAttribute("x", bbox.x);
-                my_image.setAttribute("y", bbox.y);
+        // Create image element of correct size
+        var my_image = document.createElementNS(svgNS, "image");
+        my_image.setAttribute("width", my_canvas.width);
+        my_image.setAttribute("height", my_canvas.height);
+        my_image.setAttribute("x", bbox.x);
+        my_image.setAttribute("y", bbox.y);
 
-                // Set image to data url
-                var my_png = my_canvas.toDataURL();
-                my_image.setAttributeNS(xlinkNS, "xlink:href", my_png);
+        // Set image to data url
+        var my_png = my_canvas.toDataURL();
+        my_image.setAttributeNS(xlinkNS, "xlink:href", my_png);
 
-                // Insert image into document
-                shape.parentNode.insertBefore(my_image, shape);
-                shape.style.fill = "none";
+        // Insert image into document
+        shape.parentNode.insertBefore(my_image, shape);
+        shape.style.fill = "none";
 
-                // Create clip referencing shape and insert into document
-                var clip = document.createElementNS(svgNS, "clipPath"),
-                    clip_id = "patchjs_clip" + i;
+        // Create clip referencing shape and insert into document
+        var clip = document.createElementNS(svgNS, "clipPath"),
+          clip_id = "patchjs_clip" + i;
 
-                clip.setAttribute("id", clip_id);
+        clip.setAttribute("id", clip_id);
 
-                var use = document.createElementNS(svgNS, "use");
+        var use = document.createElementNS(svgNS, "use");
 
-                use.setAttributeNS(xlinkNS, "xlink:href", "#" + shape_id);
-                clip.appendChild(use);
-                shape.parentElement.insertBefore(clip, shape);
-                my_image.setAttribute("clip-path", "url(#" + clip_id + ")");
-            }
-        }
+        use.setAttributeNS(xlinkNS, "xlink:href", "#" + shape_id);
+        clip.appendChild(use);
+        shape.parentElement.insertBefore(clip, shape);
+        my_image.setAttribute("clip-path", "url(#" + clip_id + ")");
+      }
     }
+  }
 })();