diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts index 4703fd33..d9dfb321 100644 --- a/src/shapes/Text.ts +++ b/src/shapes/Text.ts @@ -261,18 +261,17 @@ export class Text extends Shape { context.save(); context.beginPath(); - context.moveTo( - lineTranslateX, - translateY + lineTranslateY + Math.round(fontSize / 2) - ); + let yOffset = Konva._fixTextRendering + ? Math.round(fontSize / 4) + : 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( - lineTranslateX + Math.round(lineWidth), - translateY + lineTranslateY + Math.round(fontSize / 2) - ); + context.lineTo(x + Math.round(lineWidth), y); // I have no idea what is real ratio // just /15 looks good enough @@ -286,7 +285,8 @@ export class Text extends Shape { 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 { : width; context.lineTo( lineTranslateX + Math.round(lineWidth), - translateY + lineTranslateY + translateY + lineTranslateY + yOffset ); context.lineWidth = fontSize / 15; const gradient = this._getLinearGradient(); diff --git a/test/sandbox.html b/test/sandbox.html index 6bdd5256..0fc8756a 100644 --- a/test/sandbox.html +++ b/test/sandbox.html @@ -30,11 +30,11 @@