Can't run npm i canvas on Apple Silicon

[zachrattner]

Issue or Feature

• If this is an issue with installation, I have read the troubleshooting guide.

It seems npm i canvas fails on Apple Silicon machines. Any insights into how to fix?

1. First it fails to download precompiled binary (Expected, since it's not vended)
2. Then it fails to compile (not expected).

Steps to Reproduce

npm i canvas

Your Environment

• Version of node-canvas (output of npm list canvas or yarn list canvas):
• Environment (e.g. node 20.9.0 on macOS 14.1.1):

On an M1 Ultra Mac Studio
macOS 14.3.1
node v21.6.2
npm v10.2.4

Full error is too long for Github comments so I added it here: https://media.yembo.ai/npm-error.txt

[coderfin]

I'm not associated with this project or https://github.com/Brooooooklyn/canvas but I found that https://www.npmjs.com/package/@napi-rs/canvas is a great replacement for node-canvas. @napi-rs/canvas supports Intel and Arm (M Chip) Macs with no system dependencies. It supports all the same features that I needed. It also supports webp which was a welcome bonus and is MIT license.

Instead of registerFont use GlobalFonts.registerFromPath; createCanvas and loadImage remain the same.

[zachrattner]

@coderfin Thank you! Will check that out

[k0d3r1s]

you can build canvas from source, you will need python3/python3-dev packages + install requirements for canvas. if all required things are found, node-gyp should build canvas from source

[stefcameron]

I was hitting this on my M2 mac and noticed it was trying to compile the binary for 2 reasons:

1. I was using Node 21, which was generating an assumed pre-built binary path including ...node-v120... while the latest canvas v2.11.2 release indicates it's the first release using Node v20. There are no binary paths for the release with node-v120 in them.
   • If I use Node v20.11.1, then the generated download path includes node-v115 which is a match.
2. I was using my M2 mac, resulting in a download path ending in ...arm64.tar.gz (ARM x64) while all paths end in ...x64.tar.gz (Intel x64).

Because the download was failing for both reasons (I presume it would fail on an Intel mac running Node v21 as well because of (1)), npm was now wanting to compile a new binary.

The compilation would then fail because of a missing pixman-1 package. I installed that and then it failed on missing cairo.

Thankfully, I checked out the README and found that there are a bunch of compilation instructions (thank you -- would be great to mention this in the Release docs too, right after the Node version info...) for various platforms suggesting to run this on Mx macs:

$ brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

During the install of cairo, I noticed Brew installed python@3.12 as a dependency. So once the installation of all packages was finished, I used pyenv to set my active Python version to 3.12.1 and then ran:

$ npm install canvas  # SUCCESS 🎉

Hope this helps...

[mn4367]

I can confirm this, using Node 21 seems to be impossible at the moment as @stefcameron mentioned. Following the build instructions from the README I never really had problems building the canvas module on an MacBook Air with M1 for a long time until I switched to Node 21. Falling back to Node 20 the installation works. Maybe it's worth mentioning this also in the README.

[polnikale]

@coderfin goooosh, thanks a lot of that, man

I've been bumping into different random issues with fonts for 2 days straight, switched to alternative and it JUST WORKS WOW

OMG lifesaver

[par5ul1]

If like me, you've get ModuleNotFoundError: No module named 'distutils' in your error trace, and you have a Homebrew install of Python, brew install python-setuptools saved me (I already brew'd all the other things in the guides).

Kudos to this legend.

[ozanyurtsever]

@par5ul1 This worked for me, thanks!

[rish-norma]

@par5ul1 that worked like magic, thanks!

[shprink]

I ended up installing https://www.npmjs.com/package/@napi-rs/canvas and it works just fine on mac m1