I'm working on code to render FontAwesome SVG paths to a canvas and save the result to a PNG locally in node.js. In the process I create a Path2D object and fill it, but nothing draws. To attempt to debug the problem I attempted to draw a rectangle with a Path2D as follows:

const canvas = createCanvas(48, 48);  
const ctx = canvas.getContext('2d');  
  
ctx.fillStyle = "#222222";  
ctx.fillRect(0, 0, size, size);  
  
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);

The output I get has my 48x48 bitmap filled with dark grey and with a red rectangle top left, from the two fillRect calls.

However I also expect a green rectangle but that does not appear. What am I doing wrong?