html2canvas-pro 2.4.1 → 2.4.3

package/dist/lib/css/property-descriptors/font-family.js

@@ -9,10 +9,15 @@ exports.fontFamily = {
     parse: (_context, tokens) => {
         const accumulator = [];
         const results = [];
+        const quoted = [];
+        let isQuoted = false;
         tokens.forEach((token) => {
             switch (token.type) {
                 case 20 /* TokenType.IDENT_TOKEN */:
+                    accumulator.push(token.value);
+                    break;
                 case 0 /* TokenType.STRING_TOKEN */:
+                    isQuoted = true;
                     accumulator.push(token.value);
                     break;
                 case 17 /* TokenType.NUMBER_TOKEN */:
@@ -20,13 +25,23 @@ exports.fontFamily = {
                     break;
                 case 4 /* TokenType.COMMA_TOKEN */:
                     results.push(accumulator.join(' '));
+                    quoted.push(isQuoted);
+                    isQuoted = false;
                     accumulator.length = 0;
                     break;
             }
         });
         if (accumulator.length) {
             results.push(accumulator.join(' '));
+            quoted.push(isQuoted);
         }
-        return results.map((result) => (result.indexOf(' ') === -1 ? result : `'${result}'`));
+        return results.map((result, index) => quoted[index] || result.indexOf(' ') !== -1
+            ? `'${result
+                .replace(/\\/g, '\\\\')
+                .replace(/'/g, "\\'")
+                .replace(/\n/g, '\\a ')
+                .replace(/\r/g, '\\d ')
+                .replace(/\f/g, '\\c ')}'`
+            : result);
     }
 };

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

@@ -226,22 +226,27 @@ class BackgroundRenderer {
         if (rx > 0 && ry > 0) {
             // Cache key for radial gradient: position + radii + colour stops
             const cacheKey = `rg|${Math.round(x)}x${Math.round(y)}|${Math.round(rx)}x${Math.round(ry)}|${JSON.stringify(backgroundImage.stops)}`;
+            // The ellipse is rasterised as a circle of radius rx that is scaled vertically by
+            // ry / rx, so the offscreen canvas must be the ellipse's full bounding box
+            // (2rx × 2ry). Sizing it as a max(rx, ry) square stretched the gradient past the
+            // canvas edge whenever ry > rx, clipping the ellipse before its last stop and
+            // leaving a hard horizontal seam on tall elements.
+            const stops = (0, gradient_1.processColorStops)(backgroundImage.stops, rx * 2);
+            const lastStop = stops[stops.length - 1];
             let pattern = this.patternCache.get(cacheKey);
             if (!pattern) {
                 const ownerDocument = this.canvas.ownerDocument ?? document;
-                const size = Math.ceil(Math.max(rx, ry) * 2);
                 const offscreen = ownerDocument.createElement('canvas');
-                offscreen.width = size;
-                offscreen.height = size;
+                offscreen.width = Math.ceil(rx * 2);
+                offscreen.height = Math.ceil(ry * 2);
                 const offCtx = offscreen.getContext('2d');
                 if (offCtx) {
-                    const offRadius = Math.max(rx, ry);
-                    const gradient = offCtx.createRadialGradient(offRadius, offRadius, 0, offRadius, offRadius, offRadius);
-                    (0, gradient_1.processColorStops)(backgroundImage.stops, offRadius * 2).forEach((s) => gradient.addColorStop(s.stop, (0, color_utilities_1.asString)(s.color)));
+                    const gradient = offCtx.createRadialGradient(rx, rx, 0, rx, rx, rx);
+                    stops.forEach((s) => gradient.addColorStop(s.stop, (0, color_utilities_1.asString)(s.color)));
                     offCtx.fillStyle = gradient;
                     if (rx !== ry)
                         offCtx.scale(1, ry / rx);
-                    offCtx.fillRect(0, 0, offRadius * 2, offRadius * 2);
+                    offCtx.fillRect(0, 0, rx * 2, rx * 2);
                     pattern = this.ctx.createPattern(offscreen, 'no-repeat');
                     this.patternCache.set(cacheKey, pattern);
                 }
@@ -250,9 +255,15 @@ class BackgroundRenderer {
                 this.path(path);
                 this.ctx.save();
                 this.ctx.clip();
-                this.ctx.translate(left + x - Math.max(rx, ry), top + y - Math.max(rx, ry));
+                // Outside the ending shape a radial gradient continues with its last colour
+                // stop, so paint that first and lay the ellipse pattern on top.
+                if (lastStop) {
+                    this.ctx.fillStyle = (0, color_utilities_1.asString)(lastStop.color);
+                    this.ctx.fill();
+                }
+                this.ctx.translate(left + x - rx, top + y - ry);
                 this.ctx.fillStyle = pattern;
-                this.ctx.fillRect(0, 0, Math.max(rx, ry) * 2, Math.max(rx, ry) * 2);
+                this.ctx.fillRect(0, 0, rx * 2, ry * 2);
                 this.ctx.restore();
             }
         }

package/package.json

@@ -19,7 +19,7 @@
       "default": "./dist/html2canvas-pro.esm.js"
     }
   },
-  "version": "2.4.1",
+  "version": "2.4.3",
   "author": {
     "name": "yorickshan",
     "email": "yorickshan@gmail.com",