more fixes for gradient

konva.js

@@ -12539,6 +12539,7 @@
       Text.prototype._sceneFunc = function (context) {
           var padding = this.padding(), fontSize = this.fontSize(), lineHeightPx = this.lineHeight() * fontSize, textArr = this.textArr, textArrLen = textArr.length, verticalAlign = this.verticalAlign(), alignY = 0, align = this.align(), totalWidth = this.getWidth(), letterSpacing = this.letterSpacing(), fill = this.fill(), textDecoration = this.textDecoration(), shouldUnderline = textDecoration.indexOf('underline') !== -1, shouldLineThrough = textDecoration.indexOf('line-through') !== -1, n;
           var translateY = 0;
+          var translateY = lineHeightPx / 2;
           var lineTranslateX = 0;
           var lineTranslateY = 0;
           context.setAttr('font', this._getContextFont());
@@ -12551,7 +12552,7 @@
           else if (verticalAlign === BOTTOM) {
               alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;
           }
-          context.translate(padding, alignY + padding + lineHeightPx / 2);
+          context.translate(padding, alignY + padding);
           // draw text lines
           for (n = 0; n < textArrLen; n++) {
               var lineTranslateX = 0;

src/shapes/Text.ts

@@ -140,6 +140,7 @@ export class Text extends Shape {
       n;
 
     var translateY = 0;
+    var translateY = lineHeightPx / 2;
 
     var lineTranslateX = 0;
     var lineTranslateY = 0;
@@ -157,7 +158,7 @@ export class Text extends Shape {
       alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;
     }
 
-    context.translate(padding, alignY + padding + lineHeightPx / 2);
+    context.translate(padding, alignY + padding);
 
     // draw text lines
     for (n = 0; n < textArrLen; n++) {

test/unit/shapes/Text-test.js

@@ -534,7 +534,7 @@ suite('Text', function() {
     stage.add(layer);
 
     var trace =
-      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,40);save();save();beginPath();moveTo(0,40);lineTo(189,40);stroke();restore();fillStyle=red;fillText(h,0,0);fillStyle=red;fillText(e,49,0);fillStyle=red;fillText(l,98,0);fillStyle=red;fillText(l,121,0);fillStyle=red;fillText(o,144,0);restore();save();save();beginPath();moveTo(0,120);lineTo(211,120);stroke();restore();fillStyle=red;fillText(w,0,80);fillStyle=red;fillText(o,63,80);fillStyle=red;fillText(r,112,80);fillStyle=red;fillText(l,144,80);fillStyle=red;fillText(d,167,80);restore();restore();';
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(189,80);stroke();restore();fillStyle=red;fillText(h,0,40);fillStyle=red;fillText(e,49,40);fillStyle=red;fillText(l,98,40);fillStyle=red;fillText(l,121,40);fillStyle=red;fillText(o,144,40);restore();save();save();beginPath();moveTo(0,160);lineTo(211,160);stroke();restore();fillStyle=red;fillText(w,0,120);fillStyle=red;fillText(o,63,120);fillStyle=red;fillText(r,112,120);fillStyle=red;fillText(l,144,120);fillStyle=red;fillText(d,167,120);restore();restore();';
 
     assert.equal(layer.getContext().getTrace(), trace);
   });
@@ -678,7 +678,7 @@ suite('Text', function() {
     stage.add(layer);
 
     var trace =
-      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,50);save();fillStyle=#555;fillText(Some awesome text,17.523,0);restore();restore();';
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);beginPath();rect(0,0,200,100);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,10,10);font=normal normal 16px Arial;textBaseline=middle;textAlign=left;translate(10,42);save();fillStyle=#555;fillText(Some awesome text,17.523,8);restore();restore();';
 
     assert.equal(layer.getContext().getTrace(), trace);
   });
@@ -766,8 +766,6 @@ suite('Text', function() {
 
     var text = new Konva.Text({
       fontSize: 50,
-      y: 10,
-      x: 10,
       fillLinearGradientStartPoint: { x: 0, y: 0 },
       fillLinearGradientEndPoint: { x: 300, y: 0 },
       fillLinearGradientColorStops: [0, 'black', 1, 'red'],
@@ -900,6 +898,14 @@ suite('Text', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
 
+    layer.add(
+      new Konva.Rect({
+        stroke: 'black',
+        width: 100,
+        height: 40 * 3
+      })
+    );
+
     var text = new Konva.Text({
       fontSize: 40,
       text: 'Some good text',
@@ -912,7 +918,7 @@ suite('Text', function() {
     // this text should look like it is positioned in y = 40
 
     var trace =
-      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);font=normal normal 40px Arial;textBaseline=middle;textAlign=left;translate(0,60);save();fillStyle=black;fillText(Some good text,0,0);restore();restore();';
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,100,120);closePath();lineWidth=2;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,0,0);font=normal normal 40px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(Some good text,0,60);restore();restore();';
 
     assert.equal(layer.getContext().getTrace(), trace);
   });
@@ -991,10 +997,9 @@ suite('Text', function() {
       ctx.textBaseline = 'middle';
 
       var grd = ctx.createPattern(imageObj, 'repeat');
-      ctx.translate(0, 15);
       ctx.fillStyle = grd;
 
-      ctx.fillText(text.text(), 0, 0);
+      ctx.fillText(text.text(), 0, 15);
 
       compareLayerAndCanvas(layer, canvas, 200);
       delete Konva.pixelRatio;