fixed line-through render for center/right aligned text. close #1971

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 10.0.1 (2025-09-09)
+
+- Fixed `line-through` render for center/right aligned text
+
 ## 10.0.0 (2025-09-07)
 
 ### Breaking Changes

src/shapes/Text.ts

@@ -387,11 +387,13 @@ export class Text extends Shape<TextConfig> {
         const yOffset = !Konva.legacyTextRendering
           ? -Math.round(fontSize / 4)
           : 0;
-        context.moveTo(0, translateY + lineTranslateY + yOffset);
+        const x = align === JUSTIFY ? 0 : lineTranslateX;
+        context.moveTo(x, translateY + lineTranslateY + yOffset);
         const lineWidth =
           align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
+
         context.lineTo(
-          Math.round(lineWidth),
+          x + Math.round(lineWidth),
           translateY + lineTranslateY + yOffset
         );
         context.lineWidth = fontSize / 15;

test/unit/Text-test.ts

@@ -1095,6 +1095,29 @@ describe('Text', function () {
     assert.equal(layer.getContext().getTrace(true), trace);
   });
 
+  it('decoration with align', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text: 'hello world',
+      fontSize: 40,
+      fill: 'black',
+      width: 300,
+      textDecoration: 'underline line-through',
+      align: 'center',
+    });
+    layer.add(text);
+    stage.add(layer);
+
+    var trace =
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 40px Arial;textBaseline=alphabetic;textAlign=left;translate(0,0);save();save();beginPath();moveTo(54,44);lineTo(245,44);stroke();restore();fillStyle=black;fillText(hello world,54,34);save();beginPath();moveTo(54,24);lineTo(245,24);stroke();restore();restore();restore();';
+
+    assert.equal(layer.getContext().getTrace(false, true), trace);
+  });
+
   it('text multi line with underline and strike and gradient', function () {
     var stage = addStage();
     var layer = new Konva.Layer();