[WIP] Partially fix unscaled stroke with gradient

konva.js

@@ -2060,7 +2060,9 @@
       if (shape.hasStroke()) {
         if (!strokeScaleEnabled) {
           this.save();
-          this.setTransform(1, 0, 0, 1, 0, 0);
+          var pixelRatio = this.getCanvas().getPixelRatio();
+          var transform = this._context.currentTransform;
+          this.setTransform(pixelRatio, transform.b, transform.c, pixelRatio, transform.e, transform.f);
         }
 
         this._applyLineCap(shape);
@@ -2140,7 +2142,9 @@
           shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
         if (!strokeScaleEnabled) {
           this.save();
-          this.setTransform(1, 0, 0, 1, 0, 0);
+          var pixelRatio = this.getCanvas().getPixelRatio();
+          var transform = this._context.currentTransform;
+          this.setTransform(pixelRatio, transform.b, transform.c, pixelRatio, transform.e, transform.f);
         }
         this._applyLineCap(shape);
         this.setAttr('lineWidth', shape.strokeWidth());
@@ -12848,7 +12852,7 @@
 
   /**
    * get/set drag bound function.  This is used to override the default
-     *  drag and drop position
+   *  drag and drop position.
    * @name dragBoundFunc
    * @method
    * @memberof Konva.Node.prototype
@@ -12860,6 +12864,8 @@
    *
    * // create vertical drag and drop
    * node.dragBoundFunc(function(pos){
+   *   // important pos - is absolute position of the node
+   *   // you should return absolute position too
    *   return {
    *     x: this.getAbsolutePosition().x,
    *     y: pos.y
@@ -16180,7 +16186,8 @@
     };
   };
   Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) {
-    var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi);
+    var cosPsi = Math.cos(psi),
+      sinPsi = Math.sin(psi);
     var pt = {
       x: rx * Math.cos(theta),
       y: ry * Math.sin(theta)
@@ -16259,26 +16266,35 @@
     // create array
     var arr = cs.split('|');
     var ca = [];
+    var coords = [];
     // init context point
     var cpx = 0;
     var cpy = 0;
+
+    var re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
+    var match;
     for (n = 1; n < arr.length; n++) {
       var str = arr[n];
       var c = str.charAt(0);
       str = str.slice(1);
-      // remove ,- for consistency
+
-      str = str.replace(new RegExp(',-', 'g'), '-');
+      coords.length = 0;
-      // add commas so that it's easy to split
+      while ((match = re.exec(str))) {
-      str = str.replace(new RegExp('-', 'g'), ',-');
+        coords.push(match[0]);
-      str = str.replace(new RegExp('e,-', 'g'), 'e-');
-      var p = str.split(',');
-      if (p.length > 0 && p[0] === '') {
-        p.shift();
       }
-      // convert strings to floats
+
-      for (var i = 0; i < p.length; i++) {
+      // while ((match = re.exec(str))) {
-        p[i] = parseFloat(p[i]);
+      //   coords.push(match[0]);
+      // }
+      var p = [];
+
+      for (var j = 0, jlen = coords.length; j < jlen; j++) {
+        var parsed = parseFloat(coords[j]);
+        if (!isNaN(parsed)) {
+          p.push(parsed);
         }
+      }
+
       while (p.length > 0) {
         if (isNaN(p[0])) {
           // case for a trailing comma before next command
@@ -16287,7 +16303,8 @@
 
         var cmd = null;
         var points = [];
-        var startX = cpx, startY = cpy;
+        var startX = cpx,
+          startY = cpy;
         // Move var from within the switch to up here (jshint)
         var prevCmd, ctlPtx, ctlPty; // Ss, Tt
         var rx, ry, psi, fa, fs, x1, y1; // Aa

src/Context.js

@@ -611,7 +611,9 @@
       if (shape.hasStroke()) {
         if (!strokeScaleEnabled) {
           this.save();
-          this.setTransform(1, 0, 0, 1, 0, 0);
+          var pixelRatio = this.getCanvas().getPixelRatio();
+          var transform = this._context.currentTransform;
+          this.setTransform(pixelRatio, transform.b, transform.c, pixelRatio, transform.e, transform.f);
         }
 
         this._applyLineCap(shape);
@@ -691,7 +693,9 @@
           shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;
         if (!strokeScaleEnabled) {
           this.save();
-          this.setTransform(1, 0, 0, 1, 0, 0);
+          var pixelRatio = this.getCanvas().getPixelRatio();
+          var transform = this._context.currentTransform;
+          this.setTransform(pixelRatio, transform.b, transform.c, pixelRatio, transform.e, transform.f);
         }
         this._applyLineCap(shape);
         this.setAttr('lineWidth', shape.strokeWidth());