ctx.globalCompositeOperation not working as expected

[twlite]

Version

• "@napi-rs/canvas": "^0.1.41"
• Node.js: v20.0.0
• OS: Windows 11

How to reproduce?

Let us consider the following as an example for @napi-rs/canvas

import { createCanvas } from '@napi-rs/canvas';
import { writeFile } from 'fs/promises';

async function main() {
  const width = 500,
    height = 500;

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

  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, width, height);

  ctx.globalCompositeOperation = 'destination-in';
  ctx.beginPath();
  ctx.arc(width / 2, height / 2, width / 2, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();

  const buffer = await canvas.encode('png');
  await writeFile(`${__dirname}/output.png`, buffer);
}

main();

and the following for web browser:

<canvas id="canvas" width="500" height="500"></canvas>

const width = 500, height = 500;
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, width, height);

ctx.globalCompositeOperation = 'destination-in';
ctx.beginPath();
ctx.arc(width / 2, height / 2, width / 2, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();

Expectation

The output of the browser looks like this:

Result

The output of @napi-rs/canvas looks like this:

[nieyuyao]

It seems to be the expected behavior for blending of geometries? https://skia.org/docs/user/api/skblendmode_overview/

[Brooooooklyn]

It seems to be the expected behavior for blending of geometries?

yes, but we need to align the behavior with the browser

[nieyuyao]

I found that the skia-canvas library solves the similar issue with SkPictureRecorder. https://github.com/meihuanyu/skia-canvas/blob/e60e197f34df3da9f03af4f905acdd553807f511/src/context/mod.rs#L208
Can we refer to it to fix the issue?

[Brooooooklyn]

Can we refer to it to fix the issue?

@nieyuyao yes sure