fix text rendering. fix #1634

konvajs · Sep 4, 2023 · f39c57d · f39c57d
1 parent b687b97
commit f39c57d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts
@@ -604,6 +604,15 @@ export class Text extends Shape<TextConfig> {
     return true;
   }
 
+  _useBufferCanvas() {
+    const hasUnderline = this.textDecoration().indexOf('underline') !== -1;
+    const hasShadow = this.hasShadow();
+    if (hasUnderline || hasShadow) {
+      return true;
+    }
+    return super._useBufferCanvas();
+  }
+
   fontFamily: GetSet<string, this>;
   fontSize: GetSet<number, this>;
   fontStyle: GetSet<string, this>;

diff --git a/test/unit/Text-test.ts b/test/unit/Text-test.ts
@@ -9,6 +9,7 @@ import {
   loadImage,
   isBrowser,
   isNode,
+  compareCanvases,
 } from './test-utils';
 
 describe('Text', function () {
@@ -987,6 +988,40 @@ describe('Text', function () {
     assert.equal(layer.getContext().getTrace(), trace);
   });
 
+  it('text with underline and shadow', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      text: 'Test',
+      fill: 'black',
+      fontSize: 40,
+      textDecoration: 'underline',
+      shadowEnabled: true,
+      shadowColor: 'red',
+      shadowOffsetX: 15,
+      shadowOffsetY: 15,
+    });
+
+    layer.add(text);
+    stage.add(layer);
+
+    var trace =
+      'clearRect();save();shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();';
+
+    assert.equal(layer.getContext().getTrace(true), trace);
+
+    // now check result visually
+    // text with red shadow is the same as red text with back text on top
+    const group = new Konva.Group({});
+    layer.add(group);
+    group.add(text.clone({ shadowEnabled: false, x: 15, y: 15, fill: 'red' }));
+    group.add(text.clone({ shadowEnabled: false }));
+    const groupCanvas = group.toCanvas();
+
+    compareCanvases(groupCanvas, text.toCanvas(), 200);
+  });
+
   // ======================================================
   it('change font size should update text data', function () {
     var stage = addStage();