html2canvas-pro 2.0.4 → 2.1.0

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();
         }
@@ -343,17 +271,22 @@ class CanvasRenderer extends renderer_1.Renderer {
         }
     }
     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

@@ -80,6 +80,10 @@ const fixIOSSystemFonts = (fontFamilies) => {
     }
     return fontFamilies;
 };
+const getTextStrokeLineJoin = () => {
+    const currentWindow = typeof window !== 'undefined' ? window : undefined;
+    return currentWindow?.chrome ? 'miter' : 'round';
+};
 /**
  * Text Renderer
  *
@@ -156,7 +160,13 @@ class TextRenderer {
      * grapheme is drawn individually so spacing and CJK baseline are applied correctly.
      */
     renderTextWithLetterSpacing(text, letterSpacing, baseline, writingMode = 0 /* WRITING_MODE.HORIZONTAL_TB */) {
-        if (letterSpacing === 0 && !(0, writing_mode_1.isVerticalWritingMode)(writingMode)) {
+        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 {
@@ -165,6 +175,49 @@ class TextRenderer {
             });
         }
     }
+    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
@@ -177,21 +230,7 @@ class TextRenderer {
                     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 && !(0, writing_mode_1.isVerticalWritingMode)(styles.writingMode)) {
-                            this.ctx.strokeText(textBound.text, textBound.bounds.left, textBound.bounds.top + styles.fontSize.number);
-                        }
-                        else {
-                            this.iterateLettersWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (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;
             }
         });
@@ -422,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 && !(0, writing_mode_1.isVerticalWritingMode)(styles.writingMode)) {
-                                    this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                }
-                                else {
-                                    this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (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 && !(0, writing_mode_1.isVerticalWritingMode)(styles.writingMode)) {
-                                        this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                    }
-                                    else {
-                                        this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (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;
                         }
                     });
@@ -493,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 && !(0, writing_mode_1.isVerticalWritingMode)(styles.writingMode)) {
-                            this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                        }
-                        else {
-                            this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (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 && !(0, writing_mode_1.isVerticalWritingMode)(styles.writingMode)) {
-                                    this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                                }
-                                else {
-                                    this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (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 && !(0, writing_mode_1.isVerticalWritingMode)(styles.writingMode)) {
-                                this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
-                            }
-                            else {
-                                this.iterateLettersWithLetterSpacing(truncatedBounds, styles.letterSpacing, styles.fontSize.number, styles.writingMode, (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;
                 }
             });
@@ -550,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, 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;
-                        }
+                        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 && !(0, writing_mode_1.isVerticalWritingMode)(styles.writingMode)) {
-                                this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline);
-                            }
-                            else {
-                                this.iterateLettersWithLetterSpacing(text, styles.letterSpacing, baseline, styles.writingMode, (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;
                     }
                 }
@@ -599,4 +544,3 @@ class TextRenderer {
     }
 }
 exports.TextRenderer = TextRenderer;
-//# sourceMappingURL=text-renderer.js.map

package/dist/lib/render/effects.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isClipPathEffect = exports.isOpacityEffect = exports.isClipEffect = exports.isTransformEffect = exports.ClipPathEffect = exports.OpacityEffect = exports.ClipEffect = exports.TransformEffect = void 0;
+exports.isBlendEffect = exports.isClipPathEffect = exports.isOpacityEffect = exports.isClipEffect = exports.isTransformEffect = exports.BlendEffect = exports.ClipPathEffect = exports.OpacityEffect = exports.ClipEffect = exports.TransformEffect = void 0;
 class TransformEffect {
     constructor(offsetX, offsetY, matrix) {
         this.offsetX = offsetX;
@@ -41,6 +41,14 @@ class ClipPathEffect {
     }
 }
 exports.ClipPathEffect = ClipPathEffect;
+class BlendEffect {
+    constructor(compositeOperation) {
+        this.compositeOperation = compositeOperation;
+        this.type = 4 /* EffectType.BLEND */;
+        this.target = 2 /* EffectTarget.BACKGROUND_BORDERS */ | 4 /* EffectTarget.CONTENT */;
+    }
+}
+exports.BlendEffect = BlendEffect;
 const isTransformEffect = (effect) => effect.type === 0 /* EffectType.TRANSFORM */;
 exports.isTransformEffect = isTransformEffect;
 const isClipEffect = (effect) => effect.type === 1 /* EffectType.CLIP */;
@@ -49,4 +57,5 @@ const isOpacityEffect = (effect) => effect.type === 2 /* EffectType.OPACITY */;
 exports.isOpacityEffect = isOpacityEffect;
 const isClipPathEffect = (effect) => effect.type === 3 /* EffectType.CLIP_PATH */;
 exports.isClipPathEffect = isClipPathEffect;
-//# sourceMappingURL=effects.js.map
+const isBlendEffect = (effect) => effect.type === 4 /* EffectType.BLEND */;
+exports.isBlendEffect = isBlendEffect;

package/dist/lib/render/font-metrics.js

@@ -51,4 +51,3 @@ class FontMetrics {
     }
 }
 exports.FontMetrics = FontMetrics;
-//# sourceMappingURL=font-metrics.js.map

package/dist/lib/render/object-fit.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateObjectFitRendering = void 0;
+const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objectFit) => {
+    let sx = 0;
+    let sy = 0;
+    let sw = intrinsicWidth;
+    let sh = intrinsicHeight;
+    let dx = box.left;
+    let dy = box.top;
+    let dw = box.width;
+    let dh = box.height;
+    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;
+            }
+        }
+    }
+    return { sx, sy, sw, sh, dx, dy, dw, dh };
+};
+exports.calculateObjectFitRendering = calculateObjectFitRendering;

package/dist/lib/render/path.js

@@ -24,4 +24,3 @@ const transformPath = (path, deltaX, deltaY, deltaW, deltaH) => {
     });
 };
 exports.transformPath = transformPath;
-//# sourceMappingURL=path.js.map

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

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=renderer-interface.js.map