Fix several issues with radial/axial shadings and tiling patterns.

Previously, we set the base transformation and pattern matrix
directly to the main rendering ctx of the page, however doing this
caused the current transform to be lost. This would cause issues
with things like shear missing so the pattern was misaligned or when
stroke was used the scale of the line width or dash would be wrong.
Instead we should leave the current transform and use setTransfrom
on the pattern so it is applied correctly. For axial and radial shadings I had
to create a temporary canvas to draw the shading so I could in turn
use setTransform.

Fixes: #13325, #6769, #7847, #11018, #11597, #11473

The following already in the corpus are improved:
issue8078-page1
issue1877-page1

src/core/pattern.js

@@ -245,18 +245,17 @@ Shadings.RadialAxial = (function RadialAxialClosure() {
         unreachable(`getPattern type unknown: ${shadingType}`);
       }
 
-      const matrix = this.matrix;
-      if (matrix) {
-        p0 = Util.applyTransform(p0, matrix);
-        p1 = Util.applyTransform(p1, matrix);
-        if (shadingType === ShadingType.RADIAL) {
-          const scale = Util.singularValueDecompose2dScale(matrix);
-          r0 *= scale[0];
-          r1 *= scale[1];
-        }
-      }
-
-      return ["RadialAxial", type, this.bbox, this.colorStops, p0, p1, r0, r1];
+      return [
+        "RadialAxial",
+        type,
+        this.bbox,
+        this.colorStops,
+        p0,
+        p1,
+        r0,
+        r1,
+        this.matrix,
+      ];
     },
   };
 

src/display/canvas.js

@@ -1386,24 +1386,11 @@ const CanvasGraphics = (function CanvasGraphicsClosure() {
       ctx.globalAlpha = this.current.strokeAlpha;
       if (this.contentVisible) {
         if (typeof strokeColor === "object" && strokeColor?.getPattern) {
-          // for patterns, we transform to pattern space, calculate
-          // the pattern, call stroke, and restore to user space
-          ctx.save();
-          // The current transform will be replaced while building the pattern,
-          // but the line width needs to be adjusted by the current transform,
-          // so we must scale it. To properly fix this we should be using a
-          // pattern transform instead (see #10955).
-          const transform = ctx.mozCurrentTransform;
-          const scale = Util.singularValueDecompose2dScale(transform)[0];
-          ctx.strokeStyle = strokeColor.getPattern(ctx, this);
           const lineWidth = this.getSinglePixelWidth();
-          const scaledLineWidth = this.current.lineWidth * scale;
-          if (lineWidth < 0 && -lineWidth >= scaledLineWidth) {
-            ctx.resetTransform();
-            ctx.lineWidth = Math.round(this._combinedScaleFactor);
-          } else {
-            ctx.lineWidth = Math.max(lineWidth, scaledLineWidth);
-          }
+          ctx.save();
+          ctx.strokeStyle = strokeColor.getPattern(ctx, this);
+          // Prevent drawing too thin lines by enforcing a minimum line width.
+          ctx.lineWidth = Math.max(lineWidth, this.current.lineWidth);
           ctx.stroke();
           ctx.restore();
         } else {
@@ -1444,9 +1431,6 @@ const CanvasGraphics = (function CanvasGraphicsClosure() {
 
       if (isPatternFill) {
         ctx.save();
-        if (this.baseTransform) {
-          ctx.setTransform.apply(ctx, this.baseTransform);
-        }
         ctx.fillStyle = fillColor.getPattern(ctx, this);
         needRestore = true;
       }

src/display/pattern_helper.js

@@ -17,6 +17,19 @@ import { FormatError, info, Util } from "../shared/util.js";
 
 const ShadingIRs = {};
 
+let svgElement;
+
+// TODO: remove this when Firefox ESR supports DOMMatrix.
+function createMatrix(matrix) {
+  if (typeof DOMMatrix !== "undefined") {
+    return new DOMMatrix(matrix);
+  }
+  if (!svgElement) {
+    svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  }
+  return svgElement.createSVGMatrix(matrix);
+}
+
 function applyBoundingBox(ctx, bbox) {
   if (!bbox || typeof Path2D === "undefined") {
     return;
@@ -37,21 +50,57 @@ ShadingIRs.RadialAxial = {
     const p1 = raw[5];
     const r0 = raw[6];
     const r1 = raw[7];
+    const matrix = raw[8];
+
     return {
-      getPattern: function RadialAxial_getPattern(ctx) {
-        applyBoundingBox(ctx, bbox);
+      getPattern: function RadialAxial_getPattern(ctx, owner, shadingFill) {
+        const tmpCanvas = owner.cachedCanvases.getCanvas(
+          "pattern",
+          ctx.canvas.width,
+          ctx.canvas.height,
+          true
+        );
+
+        const tmpCtx = tmpCanvas.context;
+        tmpCtx.clearRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
+        tmpCtx.beginPath();
+        tmpCtx.rect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height);
+
+        if (!shadingFill) {
+          tmpCtx.setTransform.apply(tmpCtx, owner.baseTransform);
+          if (matrix) {
+            tmpCtx.transform.apply(tmpCtx, matrix);
+          }
+        } else {
+          tmpCtx.setTransform.apply(tmpCtx, ctx.mozCurrentTransform);
+        }
+        applyBoundingBox(tmpCtx, bbox);
+
         let grad;
         if (type === "axial") {
-          grad = ctx.createLinearGradient(p0[0], p0[1], p1[0], p1[1]);
+          grad = tmpCtx.createLinearGradient(p0[0], p0[1], p1[0], p1[1]);
         } else if (type === "radial") {
-          grad = ctx.createRadialGradient(p0[0], p0[1], r0, p1[0], p1[1], r1);
+          grad = tmpCtx.createRadialGradient(
+            p0[0],
+            p0[1],
+            r0,
+            p1[0],
+            p1[1],
+            r1
+          );
         }
 
         for (let i = 0, ii = colorStops.length; i < ii; ++i) {
           const c = colorStops[i];
           grad.addColorStop(c[0], c[1]);
         }
-        return grad;
+
+        tmpCtx.fillStyle = grad;
+        tmpCtx.fill();
+
+        const pattern = ctx.createPattern(tmpCanvas.canvas, "repeat");
+        pattern.setTransform(createMatrix(ctx.mozCurrentTransformInverse));
+        return pattern;
       },
     };
   },
@@ -505,19 +554,17 @@ const TilingPattern = (function TilingPatternClosure() {
 
       graphics.transform(dimx.scale, 0, 0, dimy.scale, 0, 0);
 
-      // transform coordinates to pattern space
-      graphics.transform(1, 0, 0, 1, -x0, -y0);
-
       this.clipBbox(graphics, bbox, x0, y0, x1, y1);
 
+      graphics.baseTransform = graphics.ctx.mozCurrentTransform.slice();
+
       graphics.executeOperatorList(operatorList);
 
-      this.ctx.transform(1, 0, 0, 1, x0, y0);
-
-      // Rescale canvas so that the ctx.createPattern call generates a pattern
-      // with the desired size.
-      this.ctx.scale(1 / dimx.scale, 1 / dimy.scale);
-      return tmpCanvas.canvas;
+      return {
+        canvas: tmpCanvas.canvas,
+        scaleX: dimx.scale,
+        scaleY: dimy.scale,
+      };
     },
 
     getSizeAndScale: function TilingPattern_getSizeAndScale(
@@ -579,15 +626,34 @@ const TilingPattern = (function TilingPatternClosure() {
       }
     },
 
-    getPattern: function TilingPattern_getPattern(ctx, owner) {
+    getPattern: function TilingPattern_getPattern(ctx, owner, shadingFill) {
       ctx = this.ctx;
       // PDF spec 8.7.2 NOTE 1: pattern's matrix is relative to initial matrix.
-      ctx.setTransform.apply(ctx, this.baseTransform);
-      ctx.transform.apply(ctx, this.matrix);
+      let matrix = ctx.mozCurrentTransformInverse;
+      if (!shadingFill) {
+        matrix = Util.transform(matrix, owner.baseTransform);
+        if (this.matrix) {
+          matrix = Util.transform(matrix, this.matrix);
+        }
+      }
 
       const temporaryPatternCanvas = this.createPatternCanvas(owner);
 
-      return ctx.createPattern(temporaryPatternCanvas, "repeat");
+      let domMatrix = createMatrix(matrix);
+      // Rescale and so that the ctx.createPattern call generates a pattern with
+      // the desired size.
+      domMatrix = domMatrix.scale(
+        1 / temporaryPatternCanvas.scaleX,
+        1 / temporaryPatternCanvas.scaleY
+      );
+
+      const pattern = ctx.createPattern(
+        temporaryPatternCanvas.canvas,
+        "repeat"
+      );
+      pattern.setTransform(domMatrix);
+
+      return pattern;
     },
   };