transparent borders/gaps for elements

[indus]

Due to a dynamic background, I wanted my doughnut chart to have fully transparent borders (a visible gap). To achieve this, I wrote a custom plugin:

import { type Plugin, type VisualElement } from "chart.js";

export const clipBorderStroke = {
  id: 'clipBorderStroke',
  afterDatasetDraw(chart, args) {
    const { ctx } = chart;
    const meta = chart.getDatasetMeta(args.index);

    meta.data.forEach((el) => {
      const { ctx } = chart;
      const o = el.options;

      ctx.save();
      ctx.globalCompositeOperation = 'destination-out';

      // Backup original styles
      const backgroundColor = o.backgroundColor;
      const borderWidth = o.borderWidth;

      // Apply temporary styles
      o.backgroundColor = 'transparent';
      o.borderWidth = (borderWidth ?? 0) + 1;

      // Draw with modified styles
      (el as unknown as VisualElement).draw(ctx);
      ctx.stroke();

      // Restore original styles
      o.backgroundColor = backgroundColor;
      o.borderWidth = borderWidth;

      ctx.restore();
    });
  }
} as Plugin

I'm sharing it here in case it helps someone, and I'd be interested to know if there's a better approach.