我正在编写代码，在Node.js中将FontAwesome的 SVG路径渲染到画布上，并将结果本地保存为PNG。

在此过程中我创建了Path2D对象并对其进行填充，但没有绘制出任何东西。为了尝试调试问题，我用Path2D绘制了一个矩形，如下所示：

import * as fs from 'fs';
import { createCanvas } from 'canvas';
import { Path2D } from "path2d";

const canvas = createCanvas(48, 48);  
const ctx = canvas.getContext('2d');  

ctx.fillStyle = "#222222";  
ctx.fillRect(0, 0, 48, 48);  

ctx.fillStyle = "#ce2e2e";  
ctx.fillRect(0,0,16,16);  

let region = new Path2D();  
region.rect(24,24,16,16);
ctx.fillStyle = "#29ea1c";  
ctx.fill(region);

fs.writeFileSync('test.png', canvas.toBuffer('image/png'))

我得到的输出是一个48x48的位图被填充为深灰色，并在左上角有一个红色矩形，这是来自两个fillRect调用的结果。

然而我还期望在中间看到一个绿色矩形，但却没有出现。我到底在做错什么？

我在Windows 11上，使用Node.js v24.14.0，并配有 [email protected] 和 [email protected]

解决方案

我不清楚为什么这一步是必要的/会起作用，但我已经找到了让我的代码起作用的方法，就是在代码开头添加以下几行：

import { createCanvas, CanvasRenderingContext2D } from "canvas";
import { Path2D, applyPath2DToCanvasRenderingContext } from"path2d";

applyPath2DToCanvasRenderingContext(CanvasRenderingContext2D);

这样我就得到了绿色矩形。