diff --git a/examples/demo3.html b/examples/demo3.html
new file mode 100644
index 0000000..8bc02dc
--- /dev/null
+++ b/examples/demo3.html
@@ -0,0 +1,54 @@
+
+
+
+
+ Text stroke tests
+
+
+
+
+
+
+ Some text with bigger text that should have a stroke
+ Bolder stroke that makes things pretty
+
+
+
+
+
\ No newline at end of file
diff --git a/src/css/index.ts b/src/css/index.ts
index b7fe5fa..44b9714 100644
--- a/src/css/index.ts
+++ b/src/css/index.ts
@@ -47,6 +47,8 @@ import {textAlign} from './property-descriptors/text-align';
import {position, POSITION} from './property-descriptors/position';
import {textShadow} from './property-descriptors/text-shadow';
import {textTransform} from './property-descriptors/text-transform';
+import {textStrokeColor} from './property-descriptors/text-stroke-color';
+import {textStrokeWidth} from './property-descriptors/text-stroke-width';
import {transform} from './property-descriptors/transform';
import {transformOrigin} from './property-descriptors/transform-origin';
import {visibility, VISIBILITY} from './property-descriptors/visibility';
@@ -131,6 +133,8 @@ export class CSSParsedDeclaration {
textDecorationLine: ReturnType;
textShadow: ReturnType;
textTransform: ReturnType;
+ textStrokeColor: Color;
+ textStrokeWidth: LengthPercentage;
transform: ReturnType;
transformOrigin: ReturnType;
visibility: ReturnType;
@@ -195,6 +199,8 @@ export class CSSParsedDeclaration {
this.textDecorationLine = parse(textDecorationLine, declaration.textDecorationLine);
this.textShadow = parse(textShadow, declaration.textShadow);
this.textTransform = parse(textTransform, declaration.textTransform);
+ this.textStrokeColor = parse(textStrokeColor, declaration.webkitTextStrokeColor);
+ this.textStrokeWidth = parse(textStrokeWidth, declaration.webkitTextStrokeWidth);
this.transform = parse(transform, declaration.transform);
this.transformOrigin = parse(transformOrigin, declaration.transformOrigin);
this.visibility = parse(visibility, declaration.visibility);
@@ -261,7 +267,8 @@ export class CSSParsedCounterDeclaration {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const parse = (descriptor: CSSPropertyDescriptor, style?: string | null) => {
const tokenizer = new Tokenizer();
- const value = style !== null && typeof style !== 'undefined' ? style.toString() : descriptor.initialValue;
+ const value =
+ style !== null && typeof style !== 'undefined' && style != '' ? style.toString() : descriptor.initialValue;
tokenizer.write(value);
const parser = new Parser(tokenizer.read());
switch (descriptor.type) {
diff --git a/src/css/property-descriptors/text-stroke-color.ts b/src/css/property-descriptors/text-stroke-color.ts
new file mode 100644
index 0000000..2a5d410
--- /dev/null
+++ b/src/css/property-descriptors/text-stroke-color.ts
@@ -0,0 +1,9 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+
+export const textStrokeColor: IPropertyTypeValueDescriptor = {
+ name: `-webkit-text-stroke-color`,
+ initialValue: 'transparent',
+ prefix: false,
+ type: PropertyDescriptorParsingType.TYPE_VALUE,
+ format: 'color'
+};
diff --git a/src/css/property-descriptors/text-stroke-width.ts b/src/css/property-descriptors/text-stroke-width.ts
new file mode 100644
index 0000000..2130296
--- /dev/null
+++ b/src/css/property-descriptors/text-stroke-width.ts
@@ -0,0 +1,8 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+export const textStrokeWidth: IPropertyTypeValueDescriptor = {
+ name: '-webkit-text-stroke-width',
+ initialValue: '0',
+ type: PropertyDescriptorParsingType.TYPE_VALUE,
+ prefix: false,
+ format: 'length-percentage'
+};
diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index 0e91684..3430e3a 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -233,6 +233,15 @@ export class CanvasRenderer {
}
});
}
+
+ if (styles.textStrokeWidth && styles.textStrokeColor && text.text.trim().length) {
+ this.ctx.strokeStyle = asString(styles.textStrokeColor);
+ this.ctx.lineWidth = getAbsoluteValue(styles.textStrokeWidth, text.bounds.width);
+ this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
+
+ this.ctx.strokeStyle = '';
+ this.ctx.lineWidth = 0;
+ }
});
}