fix underline for experimental render

src/shapes/Text.ts

@@ -261,18 +261,17 @@ export class Text extends Shape<TextConfig> {
         context.save();
         context.beginPath();
 
-        context.moveTo(
+        let yOffset = Konva._fixTextRendering
-          lineTranslateX,
+          ? Math.round(fontSize / 4)
-          translateY + lineTranslateY + Math.round(fontSize / 2)
+          : Math.round(fontSize / 2);
-        );
+        const x = lineTranslateX;
+        const y = translateY + lineTranslateY + yOffset;
+        context.moveTo(x, y);
         spacesNumber = text.split(' ').length - 1;
         oneWord = spacesNumber === 0;
         lineWidth =
           align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
-        context.lineTo(
+        context.lineTo(x + Math.round(lineWidth), y);
-          lineTranslateX + Math.round(lineWidth),
-          translateY + lineTranslateY + Math.round(fontSize / 2)
-        );
 
         // I have no idea what is real ratio
         // just /15 looks good enough
@@ -286,7 +285,8 @@ export class Text extends Shape<TextConfig> {
       if (shouldLineThrough) {
         context.save();
         context.beginPath();
-        context.moveTo(lineTranslateX, translateY + lineTranslateY);
+        let yOffset = Konva._fixTextRendering ? -Math.round(fontSize / 4) : 0;
+        context.moveTo(lineTranslateX, translateY + lineTranslateY + yOffset);
         spacesNumber = text.split(' ').length - 1;
         oneWord = spacesNumber === 0;
         lineWidth =
@@ -295,7 +295,7 @@ export class Text extends Shape<TextConfig> {
             : width;
         context.lineTo(
           lineTranslateX + Math.round(lineWidth),
-          translateY + lineTranslateY
+          translateY + lineTranslateY + yOffset
         );
         context.lineWidth = fontSize / 15;
         const gradient = this._getLinearGradient();

test/sandbox.html

@@ -30,11 +30,11 @@
     <script type="module">
       import Konva from '../src/index.ts';
 
-      Konva._fixTextRendering = true;
-
       var stageWidth = window.innerWidth;
       var stageHeight = window.innerHeight;
 
+      Konva._fixTextRendering = true;
+
       var stage = new Konva.Stage({
         container: 'container',
         width: stageWidth,
@@ -44,65 +44,16 @@
       var layer = new Konva.Layer();
       stage.add(layer);
 
-      // Stage Background
-      var background = new Konva.Rect({
-        width: stageWidth,
-        height: stageHeight,
-        x: 0,
-        y: 0,
-        fill: 'red',
-      });
-      layer.add(background);
-
-      // Text Item
       var text = new Konva.Text({
-        text: 'testtest',
+        x: 10,
-        x: 50,
+        y: 10,
-        y: 25,
+        text: 'Simple Text',
-        // width: 400,
+        fontSize: 300,
-        // height: 200,
+        fontFamily: 'Calibri',
-        fontSize: 64,
+        fill: 'green',
-        // verticalAlign: 'middle',
+        textDecoration: 'underline line-through',
-        align: 'center',
-        fontFamily: 'Times New Roman',
-        // textBaseline: 'alphabetic',
       });
       layer.add(text);
-
-      // Top line lining up perfect in MAC OSX CHROME, inline with top of text
-      var topLine = new Konva.Line({
-        points: [125, 103, 400, 103],
-        stroke: 'green',
-        strokeWidth: 1,
-      });
-      layer.add(topLine);
-
-      // Bottom line lining up perfect in MAC OSX CHROME, inline with bottom of text
-      var bottomLine = new Konva.Line({
-        points: [125, 143, 400, 143],
-        stroke: 'green',
-        strokeWidth: 1,
-      });
-      layer.add(bottomLine);
-
-      layer.draw();
-
-      // Get text bounding box
-      var textRect = text.getClientRect();
-
-      // Create overlay text
-      var overlayText = document.createElement('div');
-      overlayText.id = 'overlayText';
-      overlayText.style.position = 'absolute';
-      overlayText.style.left = textRect.x + 'px';
-      overlayText.style.top = textRect.y + 'px';
-      overlayText.style.width = textRect.width + 'px';
-      overlayText.style.height = textRect.height + 'px';
-      overlayText.style.lineHeight = textRect.height + 'px'; // Center vertically
-      overlayText.style.textAlign = 'center';
-      overlayText.style.fontSize = '64px';
-      overlayText.innerHTML = 'testtest';
-      document.getElementById('container').appendChild(overlayText);
     </script>
   </body>
 </html>