diff --git a/src/Context.ts b/src/Context.ts index d2596b37a..b0c59e4dc 100644 --- a/src/Context.ts +++ b/src/Context.ts @@ -68,6 +68,7 @@ var COMMA = ',', 'strokeText', 'transform', 'translate', + 'trySetLetterSpacing', ]; var CONTEXT_PROPERTIES = [ @@ -92,6 +93,11 @@ var CONTEXT_PROPERTIES = [ ] as const; const traceArrMax = 100; + +interface CanvasRenderingContext2DFeatureDetection extends CanvasRenderingContext2D { + letterSpacing: string | undefined; +} + /** * Konva wrapper around native 2d canvas context. It has almost the same API of 2d context with some additional functions. * With core Konva shapes you don't need to use this object. But you will use it if you want to create @@ -706,6 +712,21 @@ export class Context { translate(x: number, y: number) { this._context.translate(x, y); } + /** + * Set letterSpacing if supported by browser. + * @method + * @name Konva.Context#trySetLetterSpacing + * @returns true if successful, false if not supported. + */ + trySetLetterSpacing(letterSpacing: number): boolean { + var context = this._context as CanvasRenderingContext2DFeatureDetection; + var letterSpacingSupported = 'letterSpacing' in context; + + if (letterSpacingSupported) { + context.letterSpacing = letterSpacing + "px"; + } + return letterSpacingSupported; + } _enableTrace() { var that = this, len = CONTEXT_METHODS.length, diff --git a/src/shapes/Text.ts b/src/shapes/Text.ts index 8c47d9127..03434dc08 100644 --- a/src/shapes/Text.ts +++ b/src/shapes/Text.ts @@ -57,6 +57,7 @@ var AUTO = 'auto', PX_SPACE = 'px ', SPACE = ' ', RIGHT = 'right', + RTL = 'rtl', WORD = 'word', CHAR = 'char', NONE = 'none', @@ -213,6 +214,8 @@ export class Text extends Shape { context.setAttr('textAlign', LEFT); + var letterSpacingSupported = context.trySetLetterSpacing(letterSpacing); + // handle vertical alignment if (verticalAlign === MIDDLE) { alignY = (this.getHeight() - textArrLen * lineHeightPx - padding * 2) / 2; @@ -288,7 +291,7 @@ export class Text extends Shape { context.stroke(); context.restore(); } - if (letterSpacing !== 0 || align === JUSTIFY) { + if ((letterSpacing !== 0 && !letterSpacingSupported) || align === JUSTIFY) { // var words = text.split(' '); spacesNumber = text.split(' ').length - 1; var array = stringToArray(text);