Merge pull request mozilla#19015 from Snuffleupagus/@napi-rs/canvas

[api-minor] Replace the `canvas` package with `@napi-rs/canvas`

README.md

@@ -57,9 +57,6 @@ all dependencies for PDF.js:
 
     $ npm install
 
-> [!NOTE]
-> On MacOS M1/M2 you may see some `node-gyp`-related errors when running `npm install`. This is because one of our dependencies, `"canvas"`, does not provide pre-built binaries for this platform and instead `npm` will try to build it from source. Please make sure to first install the necessary native dependencies using `brew`: https://github.com/Automattic/node-canvas#compiling.
-
 Finally, you need to start a local web server as some browsers do not allow opening
 PDF files using a `file://` URL. Run:
 

examples/node/pdf2png/README.md

@@ -9,9 +9,7 @@ Install the dependencies and build the PDF.js library:
     $ npm install
     $ gulp dist-install
 
-Install the Node canvas library and run the example to convert the first page of a
-PDF file to a PNG image:
+Run the example to convert the first page of a PDF file to a PNG image:
 
-    $ npm install canvas
     $ cd examples/node/pdf2png
-    $ node pdf2png.js
+    $ node pdf2png.mjs

examples/node/pdf2png/pdf2png.mjs

@@ -57,7 +57,7 @@ try {
   const renderTask = page.render(renderContext);
   await renderTask.promise;
   // Convert the canvas to an image buffer.
-  const image = canvasAndContext.canvas.toBuffer();
+  const image = canvasAndContext.canvas.toBuffer("image/png");
   fs.writeFile("output.png", image, function (error) {
     if (error) {
       console.error("Error: " + error);

gulpfile.mjs

@@ -2256,8 +2256,7 @@ function packageJson() {
     bugs: DIST_BUGS_URL,
     license: DIST_LICENSE,
     optionalDependencies: {
-      canvas: "^3.0.0-rc2",
-      path2d: "^0.2.1",
+      "@napi-rs/canvas": "^0.1.60",
     },
     browser: {
       canvas: false,

package.json

@@ -10,11 +10,11 @@
     "@jazzer.js/core": "^2.1.0",
     "@metalsmith/layouts": "^2.7.0",
     "@metalsmith/markdown": "^1.10.0",
+    "@napi-rs/canvas": "^0.1.60",
     "@types/node": "^22.8.7",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "caniuse-lite": "^1.0.30001677",
-    "canvas": "^3.0.0-rc2",
     "core-js": "^3.39.0",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.31.0",
@@ -37,7 +37,6 @@
     "metalsmith": "^2.6.3",
     "metalsmith-html-relative": "^2.0.5",
     "ordered-read-streams": "^2.0.0",
-    "path2d": "^0.2.1",
     "pngjs": "^7.0.0",
     "postcss": "^8.4.47",
     "postcss-dark-theme-class": "^1.3.0",

src/display/canvas.js

@@ -586,7 +586,7 @@ class CanvasExtraState {
 }
 
 function putBinaryImageData(ctx, imgData) {
-  if (typeof ImageData !== "undefined" && imgData instanceof ImageData) {
+  if (imgData instanceof ImageData) {
     ctx.putImageData(imgData, 0, 0);
     return;
   }