html2canvas-pro 2.0.3 → 2.1.0

package/dist/lib/render/canvas/background-renderer.js

@@ -16,8 +16,8 @@ const background_1 = require("../background");
 const gradient_1 = require("../../css/types/functions/gradient");
 const length_percentage_1 = require("../../css/types/length-percentage");
 const color_utilities_1 = require("../../css/types/color-utilities");
-const bezier_curve_1 = require("../bezier-curve");
 const image_rendering_1 = require("../../css/property-descriptors/image-rendering");
+const canvas_path_1 = require("./canvas-path");
 /**
  * Background Renderer
  *
@@ -194,29 +194,7 @@ class BackgroundRenderer {
      * @param paths - Array of path points
      */
     path(paths) {
-        this.ctx.beginPath();
-        this.formatPath(paths);
-        this.ctx.closePath();
-    }
-    /**
-     * Format path points into canvas path
-     *
-     * @param paths - Array of path points
-     */
-    formatPath(paths) {
-        paths.forEach((point, index) => {
-            const start = (0, bezier_curve_1.isBezierCurve)(point) ? point.start : point;
-            if (index === 0) {
-                this.ctx.moveTo(start.x, start.y);
-            }
-            else {
-                this.ctx.lineTo(start.x, start.y);
-            }
-            if ((0, bezier_curve_1.isBezierCurve)(point)) {
-                this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
-            }
-        });
+        (0, canvas_path_1.createCanvasPath)(this.ctx, paths);
     }
 }
 exports.BackgroundRenderer = BackgroundRenderer;
-//# sourceMappingURL=background-renderer.js.map

package/dist/lib/render/canvas/border-renderer.js

@@ -182,4 +182,3 @@ class BorderRenderer {
     }
 }
 exports.BorderRenderer = BorderRenderer;
-//# sourceMappingURL=border-renderer.js.map

package/dist/lib/render/canvas/canvas-path.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCanvasPath = exports.formatCanvasPath = void 0;
+const bezier_curve_1 = require("../bezier-curve");
+const formatCanvasPath = (ctx, paths) => {
+    paths.forEach((point, index) => {
+        const start = (0, bezier_curve_1.isBezierCurve)(point) ? point.start : point;
+        if (index === 0) {
+            ctx.moveTo(start.x, start.y);
+        }
+        else {
+            ctx.lineTo(start.x, start.y);
+        }
+        if ((0, bezier_curve_1.isBezierCurve)(point)) {
+            ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
+        }
+    });
+};
+exports.formatCanvasPath = formatCanvasPath;
+const createCanvasPath = (ctx, paths) => {
+    ctx.beginPath();
+    (0, exports.formatCanvasPath)(ctx, paths);
+    ctx.closePath();
+};
+exports.createCanvasPath = createCanvasPath;

package/dist/lib/render/canvas/canvas-renderer.js

@@ -5,7 +5,6 @@ const stacking_context_1 = require("../stacking-context");
 const color_utilities_1 = require("../../css/types/color-utilities");
 const path_1 = require("../path");
 const bound_curves_1 = require("../bound-curves");
-const bezier_curve_1 = require("../bezier-curve");
 const vector_1 = require("../vector");
 const background_1 = require("../background");
 const text_1 = require("../../css/layout/text");
@@ -23,15 +22,17 @@ const input_element_container_1 = require("../../dom/replaced-elements/input-ele
 const textarea_element_container_1 = require("../../dom/elements/textarea-element-container");
 const select_element_container_1 = require("../../dom/elements/select-element-container");
 const iframe_element_container_1 = require("../../dom/replaced-elements/iframe-element-container");
-const renderer_1 = require("../renderer");
 const background_renderer_1 = require("./background-renderer");
 const border_renderer_1 = require("./border-renderer");
 const effects_renderer_1 = require("./effects-renderer");
 const text_renderer_1 = require("./text-renderer");
+const canvas_path_1 = require("./canvas-path");
+const object_fit_1 = require("../object-fit");
 const MASK_OFFSET = 10000;
-class CanvasRenderer extends renderer_1.Renderer {
+class CanvasRenderer {
     constructor(context, options) {
-        super(context, options);
+        this.context = context;
+        this.options = options;
         this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
         this.ctx = this.canvas.getContext('2d');
         if (!options.canvas) {
@@ -81,7 +82,7 @@ class CanvasRenderer extends renderer_1.Renderer {
         }
     }
     async renderNode(paint) {
-        if ((0, bitwise_1.contains)(paint.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
+        if (paint.container.debugRender) {
             debugger;
         }
         if (paint.container.styles.isVisible()) {
@@ -103,80 +104,7 @@ class CanvasRenderer extends renderer_1.Renderer {
             this.path(path);
             this.ctx.save();
             this.ctx.clip();
-            let sx = 0, sy = 0, sw = intrinsicWidth, sh = intrinsicHeight, dx = box.left, dy = box.top, dw = box.width, dh = box.height;
-            const { objectFit } = container.styles;
-            const boxRatio = dw / dh;
-            const imgRatio = sw / sh;
-            if (objectFit === 2 /* OBJECT_FIT.CONTAIN */) {
-                if (imgRatio > boxRatio) {
-                    dh = dw / imgRatio;
-                    dy += (box.height - dh) / 2;
-                }
-                else {
-                    dw = dh * imgRatio;
-                    dx += (box.width - dw) / 2;
-                }
-            }
-            else if (objectFit === 4 /* OBJECT_FIT.COVER */) {
-                if (imgRatio > boxRatio) {
-                    sw = sh * boxRatio;
-                    sx += (intrinsicWidth - sw) / 2;
-                }
-                else {
-                    sh = sw / boxRatio;
-                    sy += (intrinsicHeight - sh) / 2;
-                }
-            }
-            else if (objectFit === 8 /* OBJECT_FIT.NONE */) {
-                if (sw > dw) {
-                    sx += (sw - dw) / 2;
-                    sw = dw;
-                }
-                else {
-                    dx += (dw - sw) / 2;
-                    dw = sw;
-                }
-                if (sh > dh) {
-                    sy += (sh - dh) / 2;
-                    sh = dh;
-                }
-                else {
-                    dy += (dh - sh) / 2;
-                    dh = sh;
-                }
-            }
-            else if (objectFit === 16 /* OBJECT_FIT.SCALE_DOWN */) {
-                const containW = imgRatio > boxRatio ? dw : dh * imgRatio;
-                const noneW = sw > dw ? sw : dw;
-                if (containW < noneW) {
-                    if (imgRatio > boxRatio) {
-                        dh = dw / imgRatio;
-                        dy += (box.height - dh) / 2;
-                    }
-                    else {
-                        dw = dh * imgRatio;
-                        dx += (box.width - dw) / 2;
-                    }
-                }
-                else {
-                    if (sw > dw) {
-                        sx += (sw - dw) / 2;
-                        sw = dw;
-                    }
-                    else {
-                        dx += (dw - sw) / 2;
-                        dw = sw;
-                    }
-                    if (sh > dh) {
-                        sy += (sh - dh) / 2;
-                        sh = dh;
-                    }
-                    else {
-                        dy += (dh - sh) / 2;
-                        dh = sh;
-                    }
-                }
-            }
+            const { sx, sy, sw, sh, dx, dy, dw, dh } = (0, object_fit_1.calculateObjectFitRendering)(intrinsicWidth, intrinsicHeight, box, container.styles.objectFit);
             this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
             this.ctx.restore();
         }
@@ -309,7 +237,7 @@ class CanvasRenderer extends renderer_1.Renderer {
                 new vector_1.Vector(bounds.left, bounds.top + bounds.height)
             ]);
             this.ctx.clip();
-            this.textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline);
+            this.textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(container.value, textBounds), styles.letterSpacing, baseline, styles.writingMode);
             this.ctx.restore();
             this.ctx.textBaseline = 'alphabetic';
             this.ctx.textAlign = 'left';
@@ -336,24 +264,29 @@ class CanvasRenderer extends renderer_1.Renderer {
                 this.ctx.textBaseline = 'middle';
                 this.ctx.textAlign = 'right';
                 const bounds = new bounds_1.Bounds(container.bounds.left, container.bounds.top + (0, length_percentage_1.getAbsoluteValue)(container.styles.paddingTop, container.bounds.width), container.bounds.width, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 1);
-                this.textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 2);
+                this.textRenderer.renderTextWithLetterSpacing(new text_1.TextBounds(paint.listValue, bounds), styles.letterSpacing, (0, line_height_1.computeLineHeight)(styles.lineHeight, styles.fontSize.number) / 2 + 2, styles.writingMode);
                 this.ctx.textBaseline = 'bottom';
                 this.ctx.textAlign = 'left';
             }
         }
     }
     async renderStackContent(stack) {
-        if ((0, bitwise_1.contains)(stack.element.container.flags, 16 /* FLAGS.DEBUG_RENDER */)) {
+        if (stack.element.container.debugRender) {
             debugger;
         }
+        const signal = this.options.signal;
         // https://www.w3.org/TR/css-position-3/#painting-order
         // 1. the background and borders of the element forming the stacking context.
         await this.renderNodeBackgroundAndBorders(stack.element);
         // 2. the child stacking contexts with negative stack levels (most negative first).
         for (const child of stack.negativeZIndex) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
             await this.renderStack(child);
         }
         // 3. For all its in-flow, non-positioned, block-level descendants in tree order:
+        if (signal?.aborted)
+            throw new DOMException('The operation was aborted.', 'AbortError');
         await this.renderNodeContent(stack.element);
         for (const child of stack.nonInlineLevel) {
             await this.renderNode(child);
@@ -363,10 +296,14 @@ class CanvasRenderer extends renderer_1.Renderer {
         // which actually create a new stacking context should be considered part of the parent stacking context,
         // not this new one.
         for (const child of stack.nonPositionedFloats) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
             await this.renderStack(child);
         }
         // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
         for (const child of stack.nonPositionedInlineLevel) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
             await this.renderStack(child);
         }
         for (const child of stack.inlineLevel) {
@@ -383,11 +320,15 @@ class CanvasRenderer extends renderer_1.Renderer {
         //
         //  All transform descendants with transform other than none
         for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
             await this.renderStack(child);
         }
         // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index
         // order (smallest first) then tree order.
         for (const child of stack.positiveZIndex) {
+            if (signal?.aborted)
+                throw new DOMException('The operation was aborted.', 'AbortError');
             await this.renderStack(child);
         }
     }
@@ -405,23 +346,10 @@ class CanvasRenderer extends renderer_1.Renderer {
         this.ctx.closePath();
     }
     path(paths) {
-        this.ctx.beginPath();
-        this.formatPath(paths);
-        this.ctx.closePath();
+        (0, canvas_path_1.createCanvasPath)(this.ctx, paths);
     }
     formatPath(paths) {
-        paths.forEach((point, index) => {
-            const start = (0, bezier_curve_1.isBezierCurve)(point) ? point.start : point;
-            if (index === 0) {
-                this.ctx.moveTo(start.x, start.y);
-            }
-            else {
-                this.ctx.lineTo(start.x, start.y);
-            }
-            if ((0, bezier_curve_1.isBezierCurve)(point)) {
-                this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
-            }
-        });
+        (0, canvas_path_1.formatCanvasPath)(this.ctx, paths);
     }
     async renderNodeBackgroundAndBorders(paint) {
         this.effectsRenderer.applyEffects(paint.getEffects(2 /* EffectTarget.BACKGROUND_BORDERS */));
@@ -536,4 +464,3 @@ const canvasTextAlign = (textAlign) => {
             return 'left';
     }
 };
-//# sourceMappingURL=canvas-renderer.js.map

package/dist/lib/render/canvas/effects-renderer.js

@@ -63,6 +63,9 @@ class EffectsRenderer {
             // Clip-path: delegate shape drawing (beginPath … clip()) to the effect.
             effect.applyClip(this.ctx);
         }
+        else if ((0, effects_1.isBlendEffect)(effect)) {
+            this.ctx.globalCompositeOperation = effect.compositeOperation;
+        }
         this.activeEffects.push(effect);
     }
     /**
@@ -91,4 +94,3 @@ class EffectsRenderer {
     }
 }
 exports.EffectsRenderer = EffectsRenderer;
-//# sourceMappingURL=effects-renderer.js.map

package/dist/lib/render/canvas/foreignobject-renderer.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadSerializedSVG = exports.ForeignObjectRenderer = void 0;
+exports.ForeignObjectRenderer = void 0;
 const features_1 = require("../../core/features");
 const color_utilities_1 = require("../../css/types/color-utilities");
-const renderer_1 = require("../renderer");
-class ForeignObjectRenderer extends renderer_1.Renderer {
+class ForeignObjectRenderer {
     constructor(context, options) {
-        super(context, options);
+        this.context = context;
+        this.options = options;
         this.canvas = options.canvas ? options.canvas : document.createElement('canvas');
         this.ctx = this.canvas.getContext('2d');
-        this.options = options;
         this.canvas.width = Math.floor(options.width * options.scale);
         this.canvas.height = Math.floor(options.height * options.scale);
         this.canvas.style.width = `${options.width}px`;
@@ -19,8 +18,11 @@ class ForeignObjectRenderer extends renderer_1.Renderer {
         this.context.logger.debug(`EXPERIMENTAL ForeignObject renderer initialized (${options.width}x${options.height} at ${options.x},${options.y}) with scale ${options.scale}`);
     }
     async render(element) {
+        if (this.options.signal?.aborted) {
+            throw new DOMException('The operation was aborted.', 'AbortError');
+        }
         const svg = (0, features_1.createForeignObjectSVG)(this.options.width * this.options.scale, this.options.height * this.options.scale, this.options.scale, this.options.scale, element);
-        const img = await (0, exports.loadSerializedSVG)(svg);
+        const img = await (0, features_1.loadSerializedSVG)(svg);
         if (this.options.backgroundColor) {
             this.ctx.fillStyle = (0, color_utilities_1.asString)(this.options.backgroundColor);
             this.ctx.fillRect(0, 0, this.options.width * this.options.scale, this.options.height * this.options.scale);
@@ -30,13 +32,3 @@ class ForeignObjectRenderer extends renderer_1.Renderer {
     }
 }
 exports.ForeignObjectRenderer = ForeignObjectRenderer;
-const loadSerializedSVG = (svg) => new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => {
-        resolve(img);
-    };
-    img.onerror = reject;
-    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
-});
-exports.loadSerializedSVG = loadSerializedSVG;
-//# sourceMappingURL=foreignobject-renderer.js.map

package/dist/lib/render/canvas/text-renderer.js

@@ -16,6 +16,7 @@ exports.TextRenderer = exports.hasCJKCharacters = void 0;
 const text_1 = require("../../css/layout/text");
 const color_utilities_1 = require("../../css/types/color-utilities");
 const parser_1 = require("../../css/syntax/parser");
+const writing_mode_1 = require("../../css/property-descriptors/writing-mode");
 // iOS font fix - see https://github.com/niklasvh/html2canvas/pull/2645
 const iOSBrokenFonts = ['-apple-system', 'system-ui'];
 /**
@@ -79,6 +80,10 @@ const fixIOSSystemFonts = (fontFamilies) => {
     }
     return fontFamilies;
 };
+const getTextStrokeLineJoin = () => {
+    const currentWindow = typeof window !== 'undefined' ? window : undefined;
+    return currentWindow?.chrome ? 'miter' : 'round';
+};
 /**
  * Text Renderer
  *
@@ -106,7 +111,11 @@ class TextRenderer {
      * call (fillText or strokeText), allowing fill and stroke paths to share one
      * implementation.
      */
-    iterateLettersWithLetterSpacing(text, letterSpacing, baseline, renderFn) {
+    iterateLettersWithLetterSpacing(text, letterSpacing, baseline, writingMode, renderFn) {
+        if ((0, writing_mode_1.isVerticalWritingMode)(writingMode)) {
+            this.iterateVerticalGlyphs(text, letterSpacing, baseline, writingMode, renderFn);
+            return;
+        }
         const letters = (0, text_1.segmentGraphemes)(text.text);
         const y = text.bounds.top + baseline;
         let left = text.bounds.left;
@@ -123,21 +132,92 @@ class TextRenderer {
             left += this.ctx.measureText(letter).width + letterSpacing;
         }
     }
+    iterateVerticalGlyphs(text, letterSpacing, baseline, writingMode, renderFn) {
+        const letters = (0, text_1.segmentGraphemes)(text.text);
+        let top = text.bounds.top;
+        for (const letter of letters) {
+            if ((0, writing_mode_1.isSidewaysWritingMode)(writingMode) || (!(0, exports.hasCJKCharacters)(letter) && letter.trim().length > 0)) {
+                this.ctx.save();
+                this.ctx.translate(text.bounds.left + baseline, top);
+                this.ctx.rotate(writingMode === 4 /* WRITING_MODE.SIDEWAYS_LR */ ? -Math.PI / 2 : Math.PI / 2);
+                renderFn(letter, 0, 0);
+                this.ctx.restore();
+            }
+            else {
+                const savedBaseline = this.ctx.textBaseline;
+                if ((0, exports.hasCJKCharacters)(letter)) {
+                    this.ctx.textBaseline = 'ideographic';
+                }
+                renderFn(letter, text.bounds.left, top + baseline);
+                this.ctx.textBaseline = savedBaseline;
+            }
+            top += this.ctx.measureText(letter).width + letterSpacing;
+        }
+    }
     /**
      * Render text with letter-spacing applied (fill pass).
      * When letterSpacing is 0 the whole string is drawn in one call; otherwise each
      * grapheme is drawn individually so spacing and CJK baseline are applied correctly.
      */
-    renderTextWithLetterSpacing(text, letterSpacing, baseline) {
-        if (letterSpacing === 0) {
+    renderTextWithLetterSpacing(text, letterSpacing, baseline, writingMode = 0 /* WRITING_MODE.HORIZONTAL_TB */) {
+        this.renderFillText(text, letterSpacing, baseline, writingMode);
+    }
+    canRenderWholeText(letterSpacing, writingMode) {
+        return letterSpacing === 0 && !(0, writing_mode_1.isVerticalWritingMode)(writingMode);
+    }
+    renderFillText(text, letterSpacing, baseline, writingMode) {
+        if (this.canRenderWholeText(letterSpacing, writingMode)) {
             this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
         }
         else {
-            this.iterateLettersWithLetterSpacing(text, letterSpacing, baseline, (letter, x, y) => {
+            this.iterateLettersWithLetterSpacing(text, letterSpacing, baseline, writingMode, (letter, x, y) => {
                 this.ctx.fillText(letter, x, y);
             });
         }
     }
+    renderStrokeText(text, letterSpacing, baseline, writingMode) {
+        if (this.canRenderWholeText(letterSpacing, writingMode)) {
+            this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
+        }
+        else {
+            this.iterateLettersWithLetterSpacing(text, letterSpacing, baseline, writingMode, (letter, x, y) => {
+                this.ctx.strokeText(letter, x, y);
+            });
+        }
+    }
+    renderTextStrokeWithStyle(text, styles) {
+        if (!styles.webkitTextStrokeWidth || !text.text.trim().length) {
+            return;
+        }
+        this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
+        this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+        this.ctx.lineJoin = getTextStrokeLineJoin();
+        this.renderStrokeText(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+        this.ctx.strokeStyle = '';
+        this.ctx.lineWidth = 0;
+        this.ctx.lineJoin = 'miter';
+    }
+    renderTextFillWithShadows(text, styles) {
+        this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
+        this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+        const textShadows = styles.textShadow;
+        if (textShadows.length && text.text.trim().length) {
+            textShadows
+                .slice(0)
+                .reverse()
+                .forEach((textShadow) => {
+                this.ctx.shadowColor = (0, color_utilities_1.asString)(textShadow.color);
+                this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
+                this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
+                this.ctx.shadowBlur = textShadow.blur.number;
+                this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
+            });
+            this.ctx.shadowColor = '';
+            this.ctx.shadowOffsetX = 0;
+            this.ctx.shadowOffsetY = 0;
+            this.ctx.shadowBlur = 0;
+        }
+    }
     /**
      * Helper method to render text with paint order support
      * Reduces code duplication in line-clamp and normal rendering
@@ -147,24 +227,10 @@ class TextRenderer {
             switch (paintOrderLayer) {
                 case 0 /* PAINT_ORDER_LAYER.FILL */:
                     this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
+                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
                     break;
                 case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                    if (styles.webkitTextStrokeWidth && textBound.text.trim().length) {
-                        this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
-                        this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                        this.ctx.lineJoin =
-                            typeof window !== 'undefined' && !!window.chrome ? 'miter' : 'round';
-                        if (styles.letterSpacing === 0) {
-                            this.ctx.strokeText(textBound.text, textBound.bounds.left, textBound.bounds.top + styles.fontSize.number);
-                        }
-                        else {
-                            this.iterateLettersWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.strokeText(letter, x, y));
-                        }
-                        this.ctx.strokeStyle = '';
-                        this.ctx.lineWidth = 0;
-                        this.ctx.lineJoin = 'miter';
-                    }
+                    this.renderTextStrokeWithStyle(textBound, styles);
                     break;
             }
         });
@@ -395,29 +461,10 @@ class TextRenderer {
                         switch (paintOrderLayer) {
                             case 0 /* PAINT_ORDER_LAYER.FILL */:
                                 this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                                if (styles.letterSpacing === 0) {
-                                    this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                }
-                                else {
-                                    this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.fillText(letter, x, y));
-                                }
+                                this.renderTextWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode);
                                 break;
                             case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                                if (styles.webkitTextStrokeWidth && truncatedText.trim().length) {
-                                    this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
-                                    this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                                    this.ctx.lineJoin =
-                                        typeof window !== 'undefined' && !!window.chrome ? 'miter' : 'round';
-                                    if (styles.letterSpacing === 0) {
-                                        this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                    }
-                                    else {
-                                        this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.strokeText(letter, x, y));
-                                    }
-                                    this.ctx.strokeStyle = '';
-                                    this.ctx.lineWidth = 0;
-                                    this.ctx.lineJoin = 'miter';
-                                }
+                                this.renderTextStrokeWithStyle(truncatedBounds, styles);
                                 break;
                         }
                     });
@@ -466,53 +513,11 @@ class TextRenderer {
             paintOrder.forEach((paintOrderLayer) => {
                 switch (paintOrderLayer) {
                     case 0 /* PAINT_ORDER_LAYER.FILL */: {
-                        this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                        if (styles.letterSpacing === 0) {
-                            this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                        }
-                        else {
-                            this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.fillText(letter, x, y));
-                        }
-                        const textShadows = styles.textShadow;
-                        if (textShadows.length && truncatedText.trim().length) {
-                            textShadows
-                                .slice(0)
-                                .reverse()
-                                .forEach((textShadow) => {
-                                this.ctx.shadowColor = (0, color_utilities_1.asString)(textShadow.color);
-                                this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
-                                this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-                                this.ctx.shadowBlur = textShadow.blur.number;
-                                if (styles.letterSpacing === 0) {
-                                    this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                }
-                                else {
-                                    this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.fillText(letter, x, y));
-                                }
-                            });
-                            this.ctx.shadowColor = '';
-                            this.ctx.shadowOffsetX = 0;
-                            this.ctx.shadowOffsetY = 0;
-                            this.ctx.shadowBlur = 0;
-                        }
+                        this.renderTextFillWithShadows(truncatedBounds, styles);
                         break;
                     }
                     case 1 /* PAINT_ORDER_LAYER.STROKE */:
-                        if (styles.webkitTextStrokeWidth && truncatedText.trim().length) {
-                            this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
-                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                            this.ctx.lineJoin =
-                                typeof window !== 'undefined' && !!window.chrome ? 'miter' : 'round';
-                            if (styles.letterSpacing === 0) {
-                                this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                            }
-                            else {
-                                this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, (letter, x, y) => this.ctx.strokeText(letter, x, y));
-                            }
-                            this.ctx.strokeStyle = '';
-                            this.ctx.lineWidth = 0;
-                            this.ctx.lineJoin = 'miter';
-                        }
+                        this.renderTextStrokeWithStyle(truncatedBounds, styles);
                         break;
                 }
             });
@@ -523,47 +528,14 @@ class TextRenderer {
             paintOrder.forEach((paintOrderLayer) => {
                 switch (paintOrderLayer) {
                     case 0 /* PAINT_ORDER_LAYER.FILL */: {
-                        this.ctx.fillStyle = (0, color_utilities_1.asString)(styles.color);
-                        this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
-                        const textShadows = styles.textShadow;
-                        if (textShadows.length && text.text.trim().length) {
-                            textShadows
-                                .slice(0)
-                                .reverse()
-                                .forEach((textShadow) => {
-                                this.ctx.shadowColor = (0, color_utilities_1.asString)(textShadow.color);
-                                this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
-                                this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-                                this.ctx.shadowBlur = textShadow.blur.number;
-                                this.renderTextWithLetterSpacing(text, styles.letterSpacing, styles.fontSize.number);
-                            });
-                            this.ctx.shadowColor = '';
-                            this.ctx.shadowOffsetX = 0;
-                            this.ctx.shadowOffsetY = 0;
-                            this.ctx.shadowBlur = 0;
-                        }
+                        this.renderTextFillWithShadows(text, styles);
                         if (styles.textDecorationLine.length) {
                             this.renderTextDecoration(text.bounds, styles);
                         }
                         break;
                     }
                     case 1 /* PAINT_ORDER_LAYER.STROKE */: {
-                        if (styles.webkitTextStrokeWidth && text.text.trim().length) {
-                            this.ctx.strokeStyle = (0, color_utilities_1.asString)(styles.webkitTextStrokeColor);
-                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
-                            this.ctx.lineJoin =
-                                typeof window !== 'undefined' && !!window.chrome ? 'miter' : 'round';
-                            const baseline = styles.fontSize.number;
-                            if (styles.letterSpacing === 0) {
-                                this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
-                            }
-                            else {
-                                this.iterateLettersWithLetterSpacing(text, styles.letterSpacing, baseline, (letter, x, y) => this.ctx.strokeText(letter, x, y));
-                            }
-                            this.ctx.strokeStyle = '';
-                            this.ctx.lineWidth = 0;
-                            this.ctx.lineJoin = 'miter';
-                        }
+                        this.renderTextStrokeWithStyle(text, styles);
                         break;
                     }
                 }
@@ -572,4 +544,3 @@ class TextRenderer {
     }
 }
 exports.TextRenderer = TextRenderer;
-//# sourceMappingURL=text-renderer.js.map