diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts index 902c7df5..0ee8de55 100644 --- a/src/shapes/Text.ts +++ b/src/shapes/Text.ts @@ -604,6 +604,15 @@ export class Text extends Shape { return true; } + _useBufferCanvas() { + const hasUnderline = this.textDecoration().indexOf('underline') !== -1; + const hasShadow = this.hasShadow(); + if (hasUnderline || hasShadow) { + return true; + } + return super._useBufferCanvas(); + } + fontFamily: GetSet; fontSize: GetSet; fontStyle: GetSet; diff --git a/test/unit/Text-test.ts b/test/unit/Text-test.ts index c1b1a91b..111bcfcd 100644 --- 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();