fix: make stop method available for Canvas painter objects

[geonhwiii]

Describe the bug

In order to use radialGradient in Canvas, we need to call the stop method, and the stop method is not available.

To Reproduce

If you call the stop method after using radialGradient on the painter object in Canvas, as shown in the code below, you will get an error.

<Canvas
        paint={(painter) => {
          const centerX = 250;
          const centerY = 250;
          const startRadius = 30;
          const fillRadius = 30;
          const subStartAngle = 0;
          const subEndAngle = 2 * Math.PI;
          // Attempt to create a radial gradient with color stops
          const gradient = painter.radialGradient(
            centerX,
            centerY,
            startRadius,
            centerX,
            centerY,
            fillRadius,
          );
          gradient.stop(0, '#FFF');
          gradient.stop(1, '#000');
          painter
            .save()
            .path(
              drawSector(
                centerX,
                centerY,
                fillRadius,
                subStartAngle,
                subEndAngle,
              ),
            )
            .fill(gradient)
            .restore();
          return painter;
        }}
      />

Expected behavior

1. add gradientMethods

// renderCanvas.js
const gradientMethods = ['linearGradient', 'radialGradient'];

const painter = (ctx) => {
  const p = {};
  availableMethods.forEach((prop) => {
    if (gradientMethods.includes(prop)) {
      p[prop] = (...args) => ctx[prop](...args);
    } else {
      p[prop] = (...args) => {
        ctx[prop](...args);
        return p;
      };
    }
  });
  return p;
};

2. add ctx.stop in measureCanvas.js

// measureCanvas.js
const measureCtx = () => {
  const ctx = {};
  const points = [];
  const nil = () => ctx;
  ...
  ctx.linearGradient = nil;
  ctx.radialGradient = nil;
  ctx.stop = nil;

  ctx.getWidth = () => getMax(points.map((p) => p[0]));
  ctx.getHeight = () => getMax(points.map((p) => p[1]));

  return ctx;
};

Screenshots

This is a canvas chart using a radial gradient that I wanted to implement.

Desktop (please complete the following information):

OS: [MacOS]
Browser: [Chrome, Safari]
React-pdf version: [4.2.1]

[changeset-bot]

⚠️ No Changeset found

Latest commit: bd81e09

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR