Shadow rendered incorrectly when ctx.translate is applied (with examples)

[vincaslt]

When there is ctx.translate applied, shadows don't follow it correctly. It seems as if the offset for shadows is translating once more from the current ctx position, instead of using the same.

Here's the small reproducible test case which doesn't work correctly (tested with latest version and versions down to 0.1.48):

const { promises } = require("node:fs");
const { join } = require("node:path");
const { createCanvas, loadImage } = require("@napi-rs/canvas");

const canvas = createCanvas(500, 500);
const ctx = canvas.getContext("2d");

ctx.font = "48px Arial";
ctx.shadowColor = "rgb(255, 0, 0)";
ctx.shadowBlur = 10;
ctx.translate(50, 50);
ctx.fillText("TEST", 0, 0);

async function main() {
  // export canvas as image
  const pngData = await canvas.encode("png"); // JPEG, AVIF and WebP are also supported
  // encoding in libuv thread pool, non-blocking
  await promises.writeFile(join(__dirname, "simple.png"), pngData);
}

main();

Here's the output:

And here's how it's rendered by the browser canvas and what is expected:

If instead we change the code not to translate, it will work as expected:

// ctx.translate(50, 50);
ctx.fillText("TEST", 50, 50);