PDF.js 深入浅出 9: CanvasGraphics

// Minimal font size that would be used during canvas fillText operations.
const MIN_FONT_SIZE = 16;
// Maximum font size that would be used during canvas fillText operations.
const MAX_FONT_SIZE = 100;
 
// Defines the time the `executeOperatorList`-method is going to be executing
// before it stops and schedules a continue of execution.
const EXECUTION_TIME = 15; // ms
// Defines the number of steps before checking the execution time.
const EXECUTION_STEPS = 10;
 
const FULL_CHUNK_HEIGHT = 16;

function drawImageAtIntegerCoords(ctx, srcImg, srcX, srcY, srcW, srcH,
                                   destX, destY, destW, destH) {
  const [a, b, c, d, tx, ty] = getCurrentTransform(ctx);
  if (b === 0 && c === 0) {
    // 纯缩放/平移矩阵：可以把目标矩形四舍五入到整数像素
    const tlX = destX * a + tx;
    const rTlX = Math.round(tlX);
    const tlY = destY * d + ty;
    const rTlY = Math.round(tlY);
    const brX = (destX + destW) * a + tx;
 
    // Some pdf contains images with 1x1 images so in case of 0-width after
    // scaling we must fallback on 1 to be sure there is something.
    const rWidth = Math.abs(Math.round(brX) - rTlX) || 1;
    const brY = (destY + destH) * d + ty;
    const rHeight = Math.abs(Math.round(brY) - rTlY) || 1;
 
    ctx.setTransform(Math.sign(a), 0, 0, Math.sign(d), rTlX, rTlY);
    ctx.drawImage(srcImg, srcX, srcY, srcW, srcH, 0, 0, rWidth, rHeight);
    ctx.setTransform(a, b, c, d, tx, ty);
 
    return [rWidth, rHeight];
  }
  // 非轴对齐矩阵：交给浏览器自行处理
  ctx.drawImage(srcImg, srcX, srcY, srcW, srcH, destX, destY, destW, destH);
  ...
}

function mirrorContextOperations(ctx, destCtx) { ... }

class CanvasExtraState {
  // Are soft masks and alpha values shapes or opacities?
  alphaIsShape = false;
 
  fontSize = 0;
  fontSizeScale = 1;
  textMatrix = null;
  textMatrixScale = 1;
  fontMatrix = FONT_IDENTITY_MATRIX;
  leading = 0;
 
  // Current point (in user coordinates)
  x = 0;
  y = 0;
 
  // Start of text line (in text coordinates)
  lineX = 0;
  lineY = 0;
 
  charSpacing = 0;
  wordSpacing = 0;
  textHScale = 1;
  textRenderingMode = TextRenderingMode.FILL;
  textRise = 0;
 
  fillColor = "#000000";
  strokeColor = "#000000";
 
  tilingPatternDims = null;
  patternFill = false;
  patternStroke = false;
 
  // Note: fill alpha applies to all non-stroking operations
  fillAlpha = 1;
  strokeAlpha = 1;
  lineWidth = 1;
  activeSMask = null;
  transferMaps = "none";
 
  minMax = F32_BBOX_INIT.slice();
 
  constructor(width, height) {
    this.clipBox = new Float32Array([0, 0, width, height]);
  }
}

clone() {
  const clone = Object.create(this);
  clone.clipBox = this.clipBox.slice();
  clone.minMax = this.minMax.slice();
  clone.tilingPatternDims = this.tilingPatternDims?.slice();
  return clone;
}

getPathBoundingBox(pathType = PathType.FILL, transform = null) {
  const box = this.minMax.slice();
  if (pathType === PathType.STROKE) {
    if (!transform) {
      unreachable("Stroke bounding box must include transform.");
    }
    // Stroked paths can be outside of the path bounding box by 1/2 the line
    // width.
    Util.singularValueDecompose2dScale(transform, XY);
    const xStrokePad = (XY[0] * this.lineWidth) / 2;
    const yStrokePad = (XY[1] * this.lineWidth) / 2;
    box[0] -= xStrokePad;
    box[1] -= yStrokePad;
    box[2] += xStrokePad;
    box[3] += yStrokePad;
  }
  return box;
}
 
updateClipFromPath() {
  const intersect = Util.intersect(this.clipBox, this.getPathBoundingBox());
  this.startNewPathAndClipBox(intersect || [0, 0, 0, 0]);
}

constructor(
  canvasCtx,
  commonObjs,      // 文档级对象池（g_ 前缀：字体、图片、Pattern）
  objs,            // 页级对象池（p{n}_ 前缀）
  canvasFactory,   // 离屏 canvas 分配器
  filterFactory,   // CSS filter 生成器（转移函数）
  { optionalContentConfig, markedContentStack = null },
  annotationCanvasMap,
  pageColors,
  dependencyTracker,
  imagesTracker
) {
  this.ctx = canvasCtx;
  this.current = new CanvasExtraState(
    this.ctx.canvas.width,
    this.ctx.canvas.height
  );
  this.stateStack = [];
  this.pendingClip = null;
  this.pendingEOFill = false;
  this.commonObjs = commonObjs;
  this.objs = objs;
  this.canvasFactory = canvasFactory;
  this.filterFactory = filterFactory;
  this.groupStack = [];
  // Patterns are painted relative to the initial page/form transform, see
  // PDF spec 8.7.2 NOTE 1.
  this.baseTransform = null;
  this.baseTransformStack = [];
  this.groupLevel = 0;
  this.smaskStack = [];
  this.tempSMask = null;
  ...
  this.suspendedCtx = null;
  this.contentVisible = true;
  this.cachedPatterns = new Map();
  this.annotationCanvasMap = annotationCanvasMap;
  this.viewportScale = 1;
  this.outputScaleX = 1;
  this.outputScaleY = 1;
  ...
  this._cachedScaleForStroking = [-1, 0];
  this._cachedGetSinglePixelWidth = null;
  this._cachedBitmapsMap = new Map();
 
  this.dependencyTracker = dependencyTracker ?? null;
  this.imagesTracker = imagesTracker ?? null;
}

getObject(opIdx, data, fallback = null) {
  if (typeof data === "string") {
    this.dependencyTracker?.recordNamedDependency(opIdx, data);
    return data.startsWith("g_")
      ? this.commonObjs.get(data)
      : this.objs.get(data);
  }
  return fallback;
}

beginDrawing({ transform, viewport, transparency = false, background = null }) {
  // For pdfs that use blend modes we have to clear the canvas else certain
  // blend modes can look wrong since we'd be blending with a white
  // backdrop.
  const width = this.ctx.canvas.width;
  const height = this.ctx.canvas.height;
 
  const savedFillStyle = this.ctx.fillStyle;
  this.ctx.fillStyle = background || "#ffffff";
  this.ctx.fillRect(0, 0, width, height);
  this.ctx.fillStyle = savedFillStyle;
 
  if (transparency) {
    const transparentCanvas = (this.transparentCanvasEntry =
      this.canvasFactory.create(width, height));
    this.compositeCtx = this.ctx;
    ({ canvas: this.transparentCanvas, context: this.ctx } = transparentCanvas);
    this.ctx.save();
    this.ctx.transform(...getCurrentTransform(this.compositeCtx));
  }
 
  this.ctx.save();
  resetCtxToDefault(this.ctx);
  if (transform) {
    this.ctx.transform(...transform);
    this.outputScaleX = transform[0];
    this.outputScaleY = transform[3];
  }
  this.ctx.transform(...viewport.transform);
  this.viewportScale = viewport.scale;
 
  this.baseTransform = getCurrentTransform(this.ctx);
}

executeOperatorList(operatorList, executionStartIdx, continueCallback,
                    stepper, operationsFilter) {
  const argsArray = operatorList.argsArray;
  const fnArray = operatorList.fnArray;
  let i = executionStartIdx || 0;
  const argsArrayLen = argsArray.length;
 
  // Sometimes the OperatorList to execute is empty.
  if (argsArrayLen === i) {
    return i;
  }
 
  const chunkOperations =
    argsArrayLen - i > EXECUTION_STEPS &&
    typeof continueCallback === "function";
  const endTime = chunkOperations ? Date.now() + EXECUTION_TIME : 0;
  let steps = 0;
  ...
  while (true) {
    if (stepper !== undefined) {
      if (i === stepper.nextBreakPoint) {
        stepper.breakIt(i, continueCallback);
        return i;
      }
      if (stepper.shouldSkip(i)) {
        if (++i === argsArrayLen) {
          return i;
        }
        continue;
      }
    }
 
    if (!operationsFilter || operationsFilter(i)) {
      fnId = fnArray[i];
      fnArgs = argsArray[i] ?? null;
 
      if (fnId !== OPS.dependency) {
        if (fnArgs === null) {
          this[fnId](i);
        } else {
          this[fnId](i, ...fnArgs);
        }
      } else {
        for (const depObjId of fnArgs) {
          const objsPool = depObjId.startsWith("g_") ? commonObjs : objs;
          // If the promise isn't resolved yet, add the continueCallback
          // to the promise and bail out.
          if (!objsPool.has(depObjId)) {
            objsPool.get(depObjId, continueCallback);
            return i;
          }
        }
      }
    }
 
    i++;
 
    if (i === argsArrayLen) {
      return i;
    }
 
    // If the execution took longer then a certain amount of time and
    // `continueCallback` is specified, interrupt the execution.
    if (chunkOperations && ++steps > EXECUTION_STEPS) {
      if (Date.now() > endTime) {
        continueCallback();
        return i;
      }
      steps = 0;
    }
  }
}

if (fnArgs === null) {
  this[fnId](i);
} else {
  this[fnId](i, ...fnArgs);
}

// src/display/canvas.js（文件末尾，类定义之后）
for (const op in OPS) {
  if (CanvasGraphics.prototype[op] !== undefined) {
    CanvasGraphics.prototype[OPS[op]] = CanvasGraphics.prototype[op];
  }
}

const chunkOperations =
  argsArrayLen - i > EXECUTION_STEPS && typeof continueCallback === "function";
const endTime = chunkOperations ? Date.now() + EXECUTION_TIME : 0;

#restoreInitialState() {
  // Finishing all opened operations such as SMask group painting.
  while (this.stateStack.length || this.inSMaskMode) {
    this.restore();
  }
 
  this.current.activeSMask = null;
  this.ctx.restore();
 
  if (this.transparentCanvas) {
    this.ctx = this.compositeCtx;
    this.ctx.save();
    this.ctx.setTransform(1, 0, 0, 1, 0, 0); // Avoid apply transform twice
    this.ctx.drawImage(this.transparentCanvas, 0, 0);
    this.ctx.restore();
    this.canvasFactory.destroy(this.transparentCanvasEntry);
    this.transparentCanvas = null;
    this.transparentCanvasEntry = null;
  }
}
 
endDrawing() {
  this.#restoreInitialState();
 
  // Destroy all smask group canvases now that rendering is complete.
  for (const canvas of this.smaskGroupCanvases) {
    this.canvasFactory.destroy(canvas);
  }
  ...
}

save(opIdx) {
  if (this.inSMaskMode) {
    // SMask mode may be turned on/off causing us to lose graphics state.
    // Copy the temporary canvas state to the main(suspended) canvas to keep
    // it in sync.
    copyCtxState(this.ctx, this.suspendedCtx);
  }
  this.ctx.save();
  const old = this.current;
  this.stateStack.push(old);
  this.current = old.clone();
  this.dependencyTracker?.save(opIdx);
}
 
restore(opIdx) {
  this.dependencyTracker?.restore(opIdx);
 
  if (this.stateStack.length === 0) {
    if (this.inSMaskMode) {
      this.endSMaskMode();
    }
    return;
  }
 
  this.current = this.stateStack.pop();
  this.ctx.restore();
  if (this.inSMaskMode) {
    copyCtxState(this.suspendedCtx, this.ctx);
    this.ctx.setTransform(this.suspendedCtx.getTransform());
  }
  this.checkSMaskState(opIdx);
 
  // Ensure that the clipping path is reset (fixes issue6413.pdf).
  this.pendingClip = null;
 
  this._cachedScaleForStroking[0] = -1;
  this._cachedGetSinglePixelWidth = null;
}

transform(opIdx, a, b, c, d, e, f) {
  this.dependencyTracker?.recordIncrementalData("transform", opIdx);
  this.ctx.transform(a, b, c, d, e, f);
 
  this._cachedScaleForStroking[0] = -1;
  this._cachedGetSinglePixelWidth = null;
}

setLineWidth(opIdx, width) {
  this.dependencyTracker?.recordSimpleData("lineWidth", opIdx);
  if (width !== this.current.lineWidth) {
    this._cachedScaleForStroking[0] = -1;
  }
  this.current.lineWidth = width;
  this.ctx.lineWidth = width;
}

setDash(opIdx, dashArray, dashPhase) {
  this.dependencyTracker?.recordSimpleData("dash", opIdx);
  const ctx = this.ctx;
  if (ctx.setLineDash !== undefined) {
    ctx.setLineDash(dashArray);
    ctx.lineDashOffset = dashPhase;
  }
}

setGState(opIdx, states) {
  for (const [key, value] of states) {
    switch (key) {
      case "LW":
        this.setLineWidth(opIdx, value);
        break;
      case "LC":
        this.setLineCap(opIdx, value);
        break;
      case "LJ":
        this.setLineJoin(opIdx, value);
        break;
      case "ML":
        this.setMiterLimit(opIdx, value);
        break;
      case "D":
        this.setDash(opIdx, value[0], value[1]);
        break;
      case "RI":
        this.setRenderingIntent(opIdx, value);
        break;
      case "FL":
        this.setFlatness(opIdx, value);
        break;
      case "Font":
        this.setFont(opIdx, value[0], value[1]);
        break;
      case "CA":
        this.current.strokeAlpha = value;
        break;
      case "ca":
        this.ctx.globalAlpha = this.current.fillAlpha = value;
        break;
      case "BM":
        this.ctx.globalCompositeOperation = value;
        break;
      case "SMask":
        this.current.activeSMask = value ? this.tempSMask : null;
        if (this.current.activeSMask) {
          this.current.activeSMask.blendMode =
            this.ctx.globalCompositeOperation;
        }
        this.tempSMask = null;
        this.checkSMaskState(opIdx);
        break;
      case "TR":
        this.ctx.filter = this.current.transferMaps =
          this.filterFactory.addFilter(value);
        break;
    }
  }
}

// stroke()
ctx.globalAlpha = this.current.strokeAlpha;
this.rescaleAndStroke(path, /* saveRestore */ true);
...
// Restore the global alpha to the fill alpha
ctx.globalAlpha = this.current.fillAlpha;

constructPath(opIdx, op, data, minMax) {
  let [path] = data;
  if (!minMax) {
    // The path is empty, so no need to update the current minMax.
    path ||= (data[0] = new Path2D());
    if (op !== OPS.stroke && op !== OPS.closeStroke) {
      this.current.tilingPatternDims = null;
    }
    this[op](opIdx, path);
    return;
  }
 
  if (!(path instanceof Path2D)) {
    path = data[0] = makePathFromDrawOPS(path);
  }
  Util.axialAlignedBoundingBox(
    minMax,
    getCurrentTransform(this.ctx),
    this.current.minMax
  );
  ...
  this[op](opIdx, path);
  this._pathStartIdx = opIdx;
}

const tilingDims = this.current.tilingPatternDims;
if (tilingDims && op !== OPS.stroke && op !== OPS.closeStroke &&
    this.current.fillColor instanceof TilingPattern) {
  const clippedBBox = Util.intersect(this.current.clipBox, this.current.minMax);
  if (!clippedBBox) {
    this.current.tilingPatternDims = null;
  } else {
    this.current.fillColor.updatePatternDims(clippedBBox, tilingDims);
  }
}

fill(opIdx, path, consumePath = true) {
  const ctx = this.ctx;
  const fillColor = this.current.fillColor;
  const isPatternFill = this.current.patternFill;
  let needRestore = false;
  const intersect = this.current.getClippedPathBoundingBox();
 
  if (isPatternFill) {
    const dims = this.current.tilingPatternDims;
    const tileIdx = dims && fillColor.canSkipPatternCanvas(dims);
    if (tileIdx) {
      // Draw the tile directly, skipping the pattern canvas.
      fillColor.drawPattern(this, path, this.pendingEOFill, tileIdx, opIdx);
      ...
      return;
    }
    ctx.save();
    ctx.fillStyle = fillColor.getPattern(
      ctx, this, getCurrentTransformInverse(ctx), PathType.FILL, opIdx
    );
    needRestore = true;
  }
 
  if (this.contentVisible && intersect !== null) {
    if (this.pendingEOFill) {
      ctx.fill(path, "evenodd");
      this.pendingEOFill = false;
    } else {
      ctx.fill(path);
    }
  }
 
  if (needRestore) {
    ctx.restore();
  }
  if (consumePath) {
    this.consumePath(opIdx, path, intersect);
  }
}

ctx.globalAlpha = this.current.strokeAlpha;
...
this.rescaleAndStroke(path, /* saveRestore */ true);
...
ctx.globalAlpha = this.current.fillAlpha;

consumePath(opIdx, path, clipBox) {
  const isEmpty = this.current.isEmptyClip();
  if (this.pendingClip) {
    this.current.updateClipFromPath();
  }
  if (!this.pendingClip) {
    this.compose(clipBox);
  }
  const ctx = this.ctx;
  if (this.pendingClip) {
    if (!isEmpty) {
      if (this.pendingClip === EO_CLIP) {
        ctx.clip(path, "evenodd");
      } else {
        ctx.clip(path);
      }
    }
    this.pendingClip = null;
    ...
  }
  this.current.startNewPathAndClipBox(this.current.clipBox);
}

clip(opIdx) {
  this.dependencyTracker?.recordFutureForcedDependency("clipMode", opIdx);
  this.pendingClip = NORMAL_CLIP;
}
 
eoClip(opIdx) {
  this.dependencyTracker?.recordFutureForcedDependency("clipMode", opIdx);
  this.pendingClip = EO_CLIP;
}

beginMarkedContent(opIdx, tag) {
  this.dependencyTracker?.beginMarkedContent(opIdx);
  this.markedContentStack.push({ visible: true });
}
 
beginMarkedContentProps(opIdx, tag, properties) {
  this.dependencyTracker?.beginMarkedContent(opIdx);
  if (tag === "OC") {
    this.markedContentStack.push({
      visible: this.optionalContentConfig.isVisible(properties),
    });
  } else {
    this.markedContentStack.push({ visible: true });
  }
  this.contentVisible = this.isContentVisible();
}
 
endMarkedContent(opIdx) {
  this.dependencyTracker?.endMarkedContent(opIdx);
  this.markedContentStack.pop();
  this.contentVisible = this.isContentVisible();
}

isContentVisible() {
  for (let i = this.markedContentStack.length - 1; i >= 0; i--) {
    if (!this.markedContentStack[i].visible) {
      return false;
    }
  }
  return true;
}

setFillRGBColor(opIdx, color) {
  this.dependencyTracker?.recordSimpleData("fillColor", opIdx);
  this.ctx.fillStyle = this.current.fillColor = color;
  this.current.patternFill = false;
  this.current.tilingPatternDims = null;
}
 
setStrokeRGBColor(opIdx, color) {
  this.dependencyTracker?.recordSimpleData("strokeColor", opIdx);
  this.ctx.strokeStyle = this.current.strokeColor = color;
  this.current.patternStroke = false;
}

getColorN_Pattern(opIdx, IR) {
  let pattern;
  if (IR[0] === "TilingPattern") {
    const baseTransform = this.baseTransform || getCurrentTransform(this.ctx);
    const canvasGraphicsFactory = {
      createCanvasGraphics: (ctx, renderingOpIdx) =>
        new CanvasGraphics(
          ctx, this.commonObjs, this.objs, this.canvasFactory, this.filterFactory,
          {
            optionalContentConfig: this.optionalContentConfig,
            markedContentStack: this.markedContentStack,
          },
          undefined, undefined,
          this.dependencyTracker
            ? new CanvasNestedDependencyTracker(
                this.dependencyTracker, renderingOpIdx,
                /* ignoreBBoxes */ true
              )
            : null
        ),
    };
    pattern = new TilingPattern(IR, this.ctx, canvasGraphicsFactory, baseTransform);
  } else {
    pattern = this._getPattern(opIdx, IR[1], IR[2]);
  }
  return pattern;
}

_getPattern(opIdx, objId, matrix = null) {
  const pattern = this.cachedPatterns.getOrInsertComputed(objId, () =>
    getShadingPattern(this.getObject(opIdx, objId))
  );
  if (matrix) {
    pattern.matrix = matrix;
  }
  return pattern;
}

shadingFill(opIdx, objId) {
  if (!this.contentVisible) {
    return;
  }
  const started = this.#beginKnockoutElement(this.current.fillAlpha);
  const ctx = this.ctx;
 
  this.save(opIdx);
  const pattern = this._getPattern(opIdx, objId);
  ctx.fillStyle = pattern.getPattern(
    ctx, this, getCurrentTransformInverse(ctx), PathType.SHADING, opIdx
  );
 
  const inv = getCurrentTransformInverse(ctx);
  if (inv) {
    const { width, height } = ctx.canvas;
    const minMax = F32_BBOX_INIT.slice();
    Util.axialAlignedBoundingBox([0, 0, width, height], inv, minMax);
    const [x0, y0, x1, y1] = minMax;
 
    this.ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
  } else {
    // HACK to draw the gradient onto an infinite rectangle.
    // PDF gradients are drawn across the entire image while
    // Canvas only allows gradients to be drawn in a rectangle
    ...
  }
}

canSkipPatternCanvas(dims)   // 只需一个 tile 时返回 tile 索引，跳过 createPattern
drawPattern(graphics, path, eoFill, tileIdx, opIdx)  // 直接把 tile 画到路径上
updatePatternDims(clippedBBox, dims)  // 根据实际填充区域裁掉多余的 tile
getPattern(ctx, graphics, invTransform, pathType, opIdx)  // 生成 CanvasPattern
isModifyingCurrentTransform()  // 图案渲染是否会改变 CTM

const baseTransform = fillColor.isModifyingCurrentTransform()
  ? ctx.getTransform()
  : null;
ctx.save();
ctx.fillStyle = fillColor.getPattern(...);
if (baseTransform) {
  const newPath = new Path2D();
  newPath.addPath(path, ctx.getTransform().invertSelf().multiplySelf(baseTransform));
  path = newPath;
}

beginGroup(opIdx, group) {
  if (!this.contentVisible) {
    return;
  }
 
  this.save(opIdx);
  // If there's an active soft mask we don't want it enabled for the group, so
  // clear it out. The mask and suspended canvas will be restored in endGroup.
  const { inSMaskMode } = this;
  if (inSMaskMode) {
    this.endSMaskMode();
    this.current.activeSMask = null;
  }
 
  const currentCtx = this.ctx;
  if (
    // A non-isolated group blends with its backdrop, so drawing it directly
    // on the parent canvas (rather than on a transparent intermediate one)
    // is correct even when it contains blend modes (bug 1873345). A soft
    // mask still needs its own canvas though, and an isolated group requires
    // a transparent backdrop, so both keep the intermediate canvas.
    (!group.needsIsolation || (!group.isolated && !group.hasSoftMask)) &&
    !group.knockout &&
    !group.isGray &&
    this.#knockoutGroupLevel === 0 &&
    currentCtx.globalAlpha === 1 &&
    currentCtx.globalCompositeOperation === "source-over" &&
    !inSMaskMode
  ) {
    if (group.bbox) { /* 用 Path2D 做裁剪 */ }
    this.groupStack.push(null); // null = no intermediate canvas
    this.#groupStackMeta.push(null);
    this.groupLevel++;
    return;
  }
 
  const currentTransform = getCurrentTransform(currentCtx);
  if (group.matrix) {
    currentCtx.transform(...group.matrix);
  }
  ...
}

// Clip the bounding box to the current canvas.
const canvasBounds = [0, 0, currentCtx.canvas.width, currentCtx.canvas.height];
 
let bounds;
if (group.bbox) {
  bounds = F32_BBOX_INIT.slice();
  Util.axialAlignedBoundingBox(group.bbox, getCurrentTransform(currentCtx), bounds);
  bounds = Util.intersect(bounds, canvasBounds) || [0, 0, 0, 0];
}

endGroup(opIdx, group) {
  if (!this.contentVisible) {
    return;
  }
  this.groupLevel--;
  const groupCtx = this.ctx;
  const ctx = this.groupStack.pop();
  const groupMeta = this.#groupStackMeta.pop();
  if (groupMeta) {
    this.#knockoutGroupLevel = groupMeta.savedKnockoutLevel;
  }
  if (ctx === null) {
    // Simple group: content was drawn directly on the parent canvas.
    this.restore(opIdx);
    return;
  }
 
  if (group.isGray) {
    this.#convertGroupToGray(groupCtx);
  }
 
  this.ctx = ctx;
  // Turn off image smoothing to avoid sub pixel interpolation which can
  // look kind of blurry for some pdfs.
  this.ctx.imageSmoothingEnabled = false;
 
  if (group.smask) {
    this.tempSMask = this.smaskStack.pop();
    this.restore(opIdx);
    ...
  } else {
    this.ctx.restore();
    const currentMtx = getCurrentTransform(this.ctx);
    this.restore(opIdx);
    this.ctx.save();
    this.ctx.setTransform(...currentMtx);
    ...
    this.ctx.drawImage(groupCtx.canvas, 0, 0);
  }
  this.ctx.restore();
  this.canvasFactory.destroy({ canvas: groupCtx.canvas, context: groupCtx });
}

beginSMaskMode(opIdx) {
  if (this.inSMaskMode) {
    throw new Error("beginSMaskMode called while already in smask mode");
  }
  const { width: drawnWidth, height: drawnHeight } = this.ctx.canvas;
  const scratchCanvas = this.canvasFactory.create(drawnWidth, drawnHeight);
  this.smaskScratchCanvas = scratchCanvas;
  this.suspendedCtx = this.ctx;
  const ctx = (this.ctx = scratchCanvas.context);
  ctx.setTransform(this.suspendedCtx.getTransform());
  copyCtxState(this.suspendedCtx, ctx);
  mirrorContextOperations(ctx, this.suspendedCtx);
 
  this._ensurePreparedSMask(this.current.activeSMask);
 
  this.setGState(opIdx, [["BM", "source-over"]]);
}
 
endSMaskMode() {
  if (!this.inSMaskMode) {
    throw new Error("endSMaskMode called while not in smask mode");
  }
  // The soft mask is done, now restore the suspended canvas as the main
  // drawing canvas.
  this.ctx._removeMirroring();
  copyCtxState(this.ctx, this.suspendedCtx);
  this.ctx = this.suspendedCtx;
 
  this.suspendedCtx = null;
  this.canvasFactory.destroy(this.smaskScratchCanvas);
  this.smaskScratchCanvas = null;
  this._clearPreparedSMask();
}

const filterSpec = hasFilter
  ? {
      url:
        subtype === "Alpha"
          ? this.filterFactory.addAlphaFilter(transferMap)
          : this.filterFactory.addLuminosityFilter(transferMap),
      subtype,
      transferMap,
    }
  : null;

const SMASK_LAYER_TO_MASK_AREA_RATIO = 4;
const { width: layerW, height: layerH } = this.ctx.canvas;
const maskArea = maskCanvas.width * maskCanvas.height;
const useLayerSize = layerW * layerH < SMASK_LAYER_TO_MASK_AREA_RATIO * maskArea;

// No-DOM fallback (Node/embedded). Scale painted alpha back to shape
// coverage; color channels are irrelevant for destination-out/in.
const sourceData = sourceCanvas.getContext("2d", { willReadFrequently: true })
  .getImageData(0, 0, width, height);
...
for (let i = 3, ii = sourcePixels.length; i < ii; i += 4) {
  maskPixels[i] = Math.min(Math.round(sourcePixels[i] * alphaScale), 255);
}

compose(dirtyBox) {
  if (!this.current.activeSMask) {
    return;
  }
 
  dirtyBox = dirtyBox
    ? [Math.floor(dirtyBox[0]), Math.floor(dirtyBox[1]),
       Math.ceil(dirtyBox[2]), Math.ceil(dirtyBox[3])]
    : [0, 0, this.ctx.canvas.width, this.ctx.canvas.height];
  const smask = this.current.activeSMask;
  const suspendedCtx = this.suspendedCtx;
  const applySMaskInPlace =
    this.#knockoutElementDepth > 0 && suspendedCtx === this.ctx;
 
  this.composeSMask(
    applySMaskInPlace ? null : suspendedCtx,
    smask,
    this.ctx,
    dirtyBox
  );
  if (applySMaskInPlace) {
    return;
  }
 
  // Clear the full scratch canvas, not just the dirty box. Pixels left
  // outside dirtyBox can leak into a later compose() whose destination-in
  // pass doesn't overwrite them, producing stale output -- this is what
  // breaks `firefox-issue17779-partial` (issue #21276).
  this.ctx.save();
  this.ctx.setTransform(1, 0, 0, 1, 0, 0);
  this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
  this.ctx.restore();
}

composeSMask(ctx, smask, layerCtx, layerBox) {
  const layerOffsetX = layerBox[0];
  const layerOffsetY = layerBox[1];
  const layerWidth = layerBox[2] - layerOffsetX;
  const layerHeight = layerBox[3] - layerOffsetY;
  if (layerWidth === 0 || layerHeight === 0) {
    return;
  }
 
  const preparedEntry = this.smaskPreparedEntry;
  if (preparedEntry) {
    // Fast path: prepared-mask destination-in drawImage.
    ...
  }
}

_scaleImage(img, inverseTransform) {
  const width = img.width ?? img.displayWidth;
  const height = img.height ?? img.displayHeight;
  const widthScale = Math.max(Math.hypot(inverseTransform[0], inverseTransform[1]), 1);
  const heightScale = Math.max(Math.hypot(inverseTransform[2], inverseTransform[3]), 1);
 
  const scaleSteps = [];
  let ws = widthScale, hs = heightScale, pw = width, ph = height;
  while ((ws > 2 && pw > 1) || (hs > 2 && ph > 1)) {
    let nw = pw, nh = ph;
    if (ws > 2 && pw > 1) { nw = Math.ceil(pw / 2); ws /= pw / nw; }
    if (hs > 2 && ph > 1) { nh = Math.ceil(ph / 2); hs /= ph / nh; }
    scaleSteps.push({ newWidth: nw, newHeight: nh });
    pw = nw; ph = nh;
  }
  ...
}

let readEntry = this.canvasFactory.create(1, 1);
let writeEntry = this.canvasFactory.create(1, 1);
...
for (const { newWidth, newHeight } of scaleSteps) {
  this.canvasFactory.reset(writeEntry, newWidth, newHeight);
  writeEntry.context.drawImage(source, 0, 0, paintWidth, paintHeight,
                               0, 0, newWidth, newHeight);
  [readEntry, writeEntry] = [writeEntry, readEntry];
  ...
}

paintImageXObject(opIdx, objId) {
  if (!this.contentVisible) {
    return;
  }
  const imgData = this.getObject(opIdx, objId);
  if (!imgData) {
    warn("Dependent image isn't ready yet");
    return;
  }
  this.paintInlineImageXObject(opIdx, imgData);
}

paintInlineImageXObject(opIdx, imgData) {
  if (!this.contentVisible) {
    return;
  }
  const width = imgData.width;
  const height = imgData.height;
  const started = this.#beginKnockoutElement(this.current.fillAlpha);
  const ctx = this.ctx;
 
  this.save(opIdx);
 
  // The filter, if any, will be applied in applyTransferMapsToBitmap.
  // It must be applied to the image before rescaling else some artifacts
  // could appear.
  const { filter } = ctx;
  if (filter !== "none" && filter !== "") {
    ctx.filter = "none";
  }
 
  // scale the image to the unit square
  ctx.scale(1 / width, -1 / height);
 
  let imgToPaint;
  let inlineImgCanvas = null;
  if (imgData.bitmap) {
    const result = this.applyTransferMapsToBitmap(imgData);
    imgToPaint = result.img;
    inlineImgCanvas = result.canvasEntry;
  } else {
    const tmpCanvas = this.canvasFactory.create(width, height);
    putBinaryImageData(tmpCanvas.context, imgData);
    imgToPaint = this.applyTransferMapsToCanvas(tmpCanvas.context);
    inlineImgCanvas = tmpCanvas;
  }
 
  const scaled = this._scaleImage(imgToPaint, getCurrentTransformInverse(ctx));
  ctx.imageSmoothingEnabled = getImageSmoothingEnabled(
    getCurrentTransform(ctx), imgData.interpolate
  );
  ...
  drawImageAtIntegerCoords(
    ctx, scaled.img, 0, 0, scaled.paintWidth, scaled.paintHeight,
    0, -height, width, height
  );
  ...
  this.compose();
  this.restore(opIdx);
  this.#endKnockoutElement(started);
}

paintImageMaskXObject(opIdx, img) {
  const count = img.count;
  img = this.getObject(opIdx, img.data, img);
  img.count = count;
 
  const ctx = this.ctx;
  const mask = this._createMaskCanvas(opIdx, img);
  const maskCanvas = mask.canvas;
 
  ctx.save();
  // The mask is drawn with the transform applied. Reset the current
  // transform to draw to the identity.
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.drawImage(maskCanvas, mask.offsetX, mask.offsetY);
  ...
  ctx.restore();
  ...
  this.compose();
}

fillCtx.globalCompositeOperation = "source-in";
fillCtx.fillStyle = isPatternFill
  ? fillColor.getPattern(...)
  : fillColor;
fillCtx.fillRect(0, 0, width, height);

cacheKey = JSON.stringify(
  isPatternFill ? currentTransform : [currentTransform.slice(0, 4), fillColor]
);

paintSolidColorImageMask(opIdx) {
  if (!this.contentVisible) {
    return;
  }
  const started = this.#beginKnockoutElement(this.current.fillAlpha);
  this.dependencyTracker
    ?.resetBBox(opIdx).recordBBox(opIdx, this.ctx, 0, 1, 0, 1)
    .recordDependencies(opIdx, Dependencies.fill)
    .recordOperation(opIdx);
  this.ctx.fillRect(0, 0, 1, 1);
  this.compose();
  this.#endKnockoutElement(started);
}

setFont(opIdx, fontRefName, size) {
  const fontObj = this.commonObjs.get(fontRefName);
  const current = this.current;
 
  if (!fontObj) {
    throw new Error(`Can't find font for ${fontRefName}`);
  }
  current.fontMatrix = fontObj.fontMatrix || FONT_IDENTITY_MATRIX;
 
  // A valid matrix needs all main diagonal elements to be non-zero
  if (current.fontMatrix[0] === 0 || current.fontMatrix[3] === 0) {
    warn("Invalid font matrix for font " + fontRefName);
  }
 
  // The spec for Tf (setFont) says that 'size' specifies the font 'scale',
  // and in some docs this can be negative (inverted x-y axes).
  if (size < 0) {
    size = -size;
    current.fontDirection = -1;
  } else {
    current.fontDirection = 1;
  }
 
  this.current.font = fontObj;
  this.current.fontSize = size;
 
  if (fontObj.isType3Font) {
    return; // we don't need ctx.font for Type3 fonts
  }
 
  const name = fontObj.loadedName || "sans-serif";
  const typeface =
    fontObj.systemFontInfo?.css || `"${name}", ${fontObj.fallbackName}`;
  ...
  const browserFontSize = MathClamp(size, MIN_FONT_SIZE, MAX_FONT_SIZE);
  this.current.fontSizeScale = size / browserFontSize;
 
  this.ctx.font = `${italic} ${bold} ${browserFontSize}px ${typeface}`;
}

showText(opIdx, glyphs) {
  const current = this.current;
  const font = current.font;
  if (font.isType3Font) {
    this.showType3Text(opIdx, glyphs);
    return;
  }
 
  const fontSize = current.fontSize;
  if (fontSize === 0) {
    return;
  }
  ...
  const fontSizeScale = current.fontSizeScale;
  const charSpacing = current.charSpacing;
  const wordSpacing = current.wordSpacing;
  const fontDirection = current.fontDirection;
  const textHScale = current.textHScale * fontDirection;
  const vertical = font.vertical;
  const spacingDir = vertical ? 1 : -1;
  const widthAdvanceScale = fontSize * current.fontMatrix[0];
 
  const simpleFillText =
    current.textRenderingMode === TextRenderingMode.FILL &&
    !font.disableFontFace &&
    !current.patternFill;
 
  ctx.save();
  if (current.textMatrix) {
    ctx.transform(...current.textMatrix);
  }
  ctx.translate(current.x, current.y + current.textRise);
 
  if (fontDirection > 0) {
    ctx.scale(textHScale, -1);
  } else {
    ctx.scale(textHScale, 1);
  }
  ...
}

let x = 0, i;
for (i = 0; i < glyphsLength; ++i) {
  const glyph = glyphs[i];
  if (typeof glyph === "number") {
    x += (spacingDir * glyph * fontSize) / 1000;
    continue;
  }
 
  const spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;
  let scaledX = x / fontSizeScale;
  ...
  if (simpleFillText && !accent) {
    ctx.fillText(glyph.fontChar, scaledX, scaledY);   // 快路径
  } else {
    this.paintChar(opIdx, glyph.fontChar, scaledX, scaledY, ...);
  }
 
  const charWidth = vertical
    ? width * widthAdvanceScale - spacing * fontDirection
    : width * widthAdvanceScale + spacing * fontDirection;
  x += charWidth;
}
if (vertical) {
  current.y -= x;
} else {
  current.x += x * textHScale;
}

paintChar(opIdx, character, x, y, patternFillTransform, patternStrokeTransform) {
  ...
  let path;
  if (
    (font.disableFontFace || isAddToPathSet || patternFill || patternStroke) &&
    !font.missingFile
  ) {
    path = font.getPathGenerator(this.commonObjs, character);
  }
 
  if (path && (font.disableFontFace || patternFill || patternStroke)) {
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(fontSize, -fontSize);
    ...
    ctx.fill(path);
    ...
    ctx.stroke(path);
    ctx.restore();
  } else {
    ctx.fillText(character, x, y);
    ctx.strokeText(character, x, y);
  }
}

if (patternFillTransform) {
  currentTransform = ctx.getTransform();
  ctx.setTransform(...patternFillTransform);
  const scaledPath = this.#getScaledPath(path, currentTransform, patternFillTransform);
  ctx.fill(scaledPath);
}

ctx.lineWidth *= Math.max(XY[0], XY[1]) / fontSize;

endText(opIdx) {
  const paths = this.pendingTextPaths;
  const ctx = this.ctx;
  ...
  if (paths !== undefined) {
    const newPath = new Path2D();
    const invTransf = ctx.getTransform().invertSelf();
    for (const { transform, x, y, fontSize, path } of paths) {
      if (!path) {
        continue; // Skip empty paths.
      }
      newPath.addPath(
        path,
        new DOMMatrix(transform)
          .preMultiplySelf(invTransf)
          .translate(x, y)
          .scale(fontSize, -fontSize)
      );
    }
    ctx.clip(newPath);
  }
  delete this.pendingTextPaths;
}

let bold = "normal";
if (fontObj.black) {
  bold = "900";
} else if (fontObj.bold) {
  bold = "bold";
}
const italic = fontObj.italic ? "italic" : "normal";
...
this.ctx.font = `${italic} ${bold} ${browserFontSize}px ${typeface}`;

// src/display/font_loader.js
createNativeFontFace() {
  ...
  const css = { weight: this.cssFontInfo.fontWeight };
  if (this.cssFontInfo.italicAngle) {
    css.style = `oblique ${this.cssFontInfo.italicAngle}deg`;
  }
  nativeFontFace = new FontFace(
    serializeFontFamily(this.cssFontInfo.fontFamily), this.data, css
  );
}

let css = `font-weight: ${this.cssFontInfo.fontWeight};`;
if (this.cssFontInfo.italicAngle) {
  css += `font-style: oblique ${this.cssFontInfo.italicAngle}deg;`;
}
const rule = `@font-face {font-family:${fontFamily};${css}src:${url}}`;

const typeface =
  fontObj.systemFontInfo?.css || `"${name}", ${fontObj.fallbackName}`;

// Checks if anti-aliasing is enabled when scaled text is painted.
// On Windows GDI scaled fonts looks bad.
const tmpCanvas = this.canvasFactory.create(10, 10);
const ctx = tmpCanvas.context;
ctx.scale(1.5, 1);
ctx.fillText("I", 0, 10);
const data = ctx.getImageData(0, 0, 10, 10).data;
...
for (let i = 3; i < data.length; i += 4) {
  if (data[i] > 0 && data[i] < 255) { enabled = true; break; }
}

showType3Text(opIdx, glyphs) {
  // Type3 fonts - each glyph is a "mini-PDF"
  const ctx = this.ctx;
  const current = this.current;
  ...
  ctx.save();
  if (current.textMatrix) {
    ctx.transform(...current.textMatrix);
  }
  ctx.translate(current.x, current.y + current.textRise);
  ctx.scale(textHScale, fontDirection);
 
  // Type3 fonts have their own operator list. Avoid mixing it up with the
  // dependency tracker of the main operator list.
  const dependencyTracker = this.dependencyTracker;
  this.dependencyTracker = dependencyTracker
    ? new CanvasNestedDependencyTracker(dependencyTracker, opIdx)
    : null;
 
  for (i = 0; i < glyphsLength; ++i) {
    glyph = glyphs[i];
    if (typeof glyph === "number") { ... continue; }
 
    const spacing = (glyph.isSpace ? wordSpacing : 0) + charSpacing;
    const operatorList = font.charProcOperatorList.get(glyph.operatorListId);
    ...
    if (this.contentVisible) {
      this.save();
      // A d0 (setCharWidth) glyph is colored (see Table 113 in pdf 1.7 specs)
      // unlike a d1 glyph painted as a stencil mask with the current fill
      // color. The constant alphas (ca/CA) are the opacity of that current
      // color, so they must not attenuate a d0 glyph.
      if (operatorList.fnArray[0] === OPS.setCharWidth) {
        current.fillAlpha = current.strokeAlpha = 1;
        ctx.globalAlpha = 1;
      }
      ctx.scale(fontSize, fontSize);
      ctx.transform(...fontMatrix);
      this.executeOperatorList(operatorList);
      this.restore();
    }
    ...
  }
  ctx.restore();
  if (dependencyTracker) {
    this.dependencyTracker = dependencyTracker;
  }
}

setCharWidth(opIdx, xWidth, yWidth) {
  // We can safely ignore this since the width should be the same
  // as the width in the Widths array.
}
 
setCharWidthAndBounds(opIdx, xWidth, yWidth, llx, lly, urx, ury) {
  const clip = new Path2D();
  clip.rect(llx, lly, urx - llx, ury - lly);
  this.ctx.clip(clip);
  ...
}

getSinglePixelWidth() {
  if (!this._cachedGetSinglePixelWidth) {
    const m = getCurrentTransform(this.ctx);
    if (m[1] === 0 && m[2] === 0) {
      // Fast path
      this._cachedGetSinglePixelWidth =
        1 / Math.min(Math.abs(m[0]), Math.abs(m[3]));
    } else {
      const absDet = Math.abs(m[0] * m[3] - m[2] * m[1]);
      const normX = Math.hypot(m[0], m[2]);
      const normY = Math.hypot(m[1], m[3]);
      this._cachedGetSinglePixelWidth = Math.max(normX, normY) / absDet;
    }
  }
  return this._cachedGetSinglePixelWidth;
}

getScaleForStroking() {
  // A pixel has thicknessX = thicknessY = 1;
  // A transformed pixel is a parallelogram and the thicknesses
  // corresponds to the heights.
  // The goal of this function is to rescale before setting the
  // lineWidth in order to have both thicknesses greater or equal
  // to 1 after transform.
  if (this._cachedScaleForStroking[0] === -1) {
    const { lineWidth } = this.current;
    const { a, b, c, d } = this.ctx.getTransform();
    let scaleX, scaleY;
 
    if (b === 0 && c === 0) {
      // Fast path
      const normX = Math.abs(a);
      const normY = Math.abs(d);
      if (normX === normY) {
        if (lineWidth === 0) {
          scaleX = scaleY = 1 / normX;
        } else {
          const scaledLineWidth = normX * lineWidth;
          scaleX = scaleY = scaledLineWidth < 1 ? 1 / scaledLineWidth : 1;
        }
      } else if (lineWidth === 0) { ... }
      ...
    } else {
      const absDet = Math.abs(a * d - b * c);
      const normX = Math.hypot(a, b);
      const normY = Math.hypot(c, d);
      ...
      const baseArea = lineWidth * absDet;
      scaleX = normY > baseArea ? normY / baseArea : 1;
      scaleY = normX > baseArea ? normX / baseArea : 1;
    }
    this._cachedScaleForStroking[0] = scaleX;
    this._cachedScaleForStroking[1] = scaleY;
  }
  return this._cachedScaleForStroking;
}