临时Canvas生成的fillPattern无法填充文本问题求助

问题背景 #

原有代码在Android移动端正常运行，但桌面版Chrome失效，核心逻辑是通过临时Canvas重新着色图片生成图案，再用该图案填充文本。同时修改的MSDN无图测试示例也在桌面端失效。

原业务代码

var fillPattern = null;
if (fontSettings.fill.recolor != '' && !IExplorerAgent && !operaAgent) {
    var c2 = document.createElement('canvas');
    c2.height = this.fillImage.height / pixelRatio;
    c2.width = this.fillImage.width / pixelRatio;
    var c2Ctx = c2.getContext('2d');                
    c2Ctx.drawImage(this.fillImage,0,0,c2.width,c2.height);
    c2Ctx.globalCompositeOperation = 'color';
    c2Ctx.fillStyle = fontSettings.fill.recolor;
    c2Ctx.fillRect(0,0,c2.width,c2.height);
    c2Ctx.globalCompositeOperation = "source-over";
    fillPattern = c2Ctx.createPattern(c2, "repeat");
} else {
    fillPattern = drawCtx.createPattern(this.fillImage, "repeat");
}
drawCtx.globalAlpha = 1;
drawCtx.fillStyle = fillPattern;
drawCtx.fillText(this.wrappedText[i], drawpointX, drawpointY + yOffset);

简化测试代码（MSDN示例修改版）

// Create a pattern, offscreen
const patternCanvas = document.createElement("canvas");
const patternContext = patternCanvas.getContext("2d");

// Give the pattern a width and height of 50
patternCanvas.width = 50;
patternCanvas.height = 50;

// Give the pattern a background color and draw an arc
patternContext.fillStyle = "#fec";
patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);
patternContext.stroke();

// Create our primary canvas and fill it with the pattern
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const pattern = ctx.createPattern(patternCanvas, "repeat");
ctx.fillStyle = pattern;
//ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = "40pt Ariel";
ctx.fillText("TEST",50,50);
// Add our primary canvas to the webpage
document.body.appendChild(canvas);

疑问

1. 临时Canvas生成的fillPattern正常工作逻辑是什么？
2. 为何桌面版Chrome出现失效情况？

解答 #

一、临时Canvas生成fillPattern的正常工作流程

• 创建离屏画布：通过document.createElement('canvas')生成临时Canvas，设置匹配图案内容的宽高。
• 绘制图案内容：在临时Canvas的上下文上绘制重复单元的内容，比如着色后的图片、自定义图形。
• 生成可重复图案：调用画布上下文的createPattern(canvasElement, repeatMode)方法，以临时Canvas为源生成图案对象。
• 应用填充：将图案赋值给目标画布的fillStyle，调用fillText或fillRect等方法，图案会自动重复填充目标区域。

二、桌面版Chrome失效的核心原因

1. 跨上下文创建图案的限制：
   业务代码中用临时Canvas的上下文（c2Ctx）调用createPattern生成图案，桌面版Chrome新版本对这种跨上下文引用的渲染逻辑做了限制，导致图案无法正确生成。而移动端Chrome未严格执行该限制，因此仍能正常运行。
2. 测试代码的画布尺寸缺失：
   简化测试代码中主画布未显式设置width和height，默认尺寸为300x150，结合字体大小和填充位置，可能导致图案填充区域未被正确渲染。
3. 绘制时序的渲染管线问题：
   临时Canvas的复合模式绘制（globalCompositeOperation = 'color'）完成后立即生成图案，Chrome的渲染管线可能未完成像素数据处理，导致图案为空。

三、修复方案

• 统一使用目标画布上下文创建图案：将业务代码中fillPattern = c2Ctx.createPattern(c2, "repeat");改为fillPattern = drawCtx.createPattern(c2, "repeat");，避免跨上下文的渲染限制。
• 显式设置主画布尺寸：给测试代码的主画布添加宽高，比如canvas.width = 400; canvas.height = 200;，确保填充区域在画布范围内。
• 确保绘制完成后生成图案：若涉及图片绘制，需在图片onload回调中执行后续逻辑，避免未加载完成就进行图案生成。

内容的提问来源于stack exchange，提问作者Timothy Ryan