Node-Canvas库问题：文本显示在图片下方被遮挡

问题核心是Canvas的绘制规则：先绘制的内容会被后绘制的覆盖。你的代码要么先画文本再画背景，要么因图片异步加载导致文本先于背景完成绘制，最终文本都被背景盖住。

修正后的代码 #

const { createCanvas, loadImage } = require("canvas");
const fs = require("fs");

// 画布尺寸
const width = 848;
const height = 600;

const canvas = createCanvas(width, height);
const context = canvas.getContext("2d");

// 先加载背景图，确保绘制顺序正确
loadImage("./assets/jimp-cert-template.jpg").then((image) => {
  // 1. 先绘制背景图，铺满整个画布
  context.drawImage(image, 0, 0, width, height);

  // 2. 再绘制文本，此时文本会叠加在背景之上
  context.font = "bold 70pt 'PT Sans'";
  context.textAlign = "center";
  context.fillStyle = "#764abc";
  context.fillText("TITLE 1", 600, 170);

  context.font = "bold 100pt 'PT Sans'";
  context.textAlign = "center";
  context.fillStyle = "#764abc";
  context.fillText("TITLE 2", 600, 270);

  // 导出图片
  const buffer = canvas.toBuffer("image/jpeg");
  fs.writeFileSync("./image.jpeg", buffer);
});

关键调整说明 #

• 固定绘制顺序：把文本绘制逻辑移到背景图加载完成的回调里，保证先画背景、再画文本，从根本上避免遮挡。
• 用drawImage实现背景铺满：相比createPattern，drawImage可以直接将图片拉伸/缩放到画布尺寸，更可靠地实现背景全覆盖的效果。
• 解决异步冲突：图片加载是异步操作，所有绘制动作必须在图片加载完成后执行，避免因时序问题导致的覆盖错误。

内容的提问来源于stack exchange，提问作者MAYANK CHHIPA