When I run this command in MacBook Pro M1 to install canvas:

 npm install --save-dev canvas

shows error:

npm ERR! code 1

npm ERR! path /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas

npm ERR! command failed

npm ERR! command sh -c node-pre-gyp install --fallback-to-build

npm ERR! Failed to execute '/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node /Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)

npm ERR! node-pre-gyp info it worked if it ends with ok

npm ERR! node-pre-gyp info using [email protected]

npm ERR! node-pre-gyp info using [email protected] | darwin | arm64

npm ERR! node-pre-gyp info check checked for "/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release/canvas.node" (not found)

npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz

npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz 

npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v93 ABI, unknown) (falling back to source compile with node-gyp) 

npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v93-darwin-unknown-arm64.tar.gz 

npm ERR! gyp info it worked if it ends with ok

npm ERR! gyp info using [email protected]

npm ERR! gyp info using [email protected] | darwin | arm64

npm ERR! gyp info ok 

npm ERR! gyp info it worked if it ends with ok

npm ERR! gyp info using [email protected]

npm ERR! gyp info using [email protected] | darwin | arm64

npm ERR! gyp info find Python using Python version 3.10.1 found at "/Library/Frameworks/Python.framework/Versions/3.10/bin/python3"

npm ERR! gyp info spawn /Library/Frameworks/Python.framework/Versions/3.10/bin/python3

npm ERR! gyp info spawn args [

npm ERR! gyp info spawn args   '/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',

npm ERR! gyp info spawn args   'binding.gyp',

npm ERR! gyp info spawn args   '-f',

npm ERR! gyp info spawn args   'make',

npm ERR! gyp info spawn args   '-I',

npm ERR! gyp info spawn args   '/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/config.gypi',

npm ERR! gyp info spawn args   '-I',

npm ERR! gyp info spawn args   '/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',

npm ERR! gyp info spawn args   '-I',

npm ERR! gyp info spawn args   '/Users/xiaoqiangjiang/Library/Caches/node-gyp/16.13.2/include/node/common.gypi',

npm ERR! gyp info spawn args   '-Dlibrary=shared_library',

npm ERR! gyp info spawn args   '-Dvisibility=default',

npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/xiaoqiangjiang/Library/Caches/node-gyp/16.13.2',

npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp',

npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/xiaoqiangjiang/Library/Caches/node-gyp/16.13.2/<(target_arch)/node.lib',

npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas',

npm ERR! gyp info spawn args   '-Dnode_engine=v8',

npm ERR! gyp info spawn args   '--depth=.',

npm ERR! gyp info spawn args   '--no-parallel',

npm ERR! gyp info spawn args   '--generator-output',

npm ERR! gyp info spawn args   'build',

npm ERR! gyp info spawn args   '-Goutput_dir=.'

npm ERR! gyp info spawn args ]

npm ERR! /bin/sh: pkg-config: command not found

npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp

npm ERR! gyp ERR! configure error 

npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1

npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16)

npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)

npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)

npm ERR! gyp ERR! System Darwin 21.3.0

npm ERR! gyp ERR! command "/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node" "/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"

npm ERR! gyp ERR! cwd /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas

npm ERR! gyp ERR! node -v v16.13.2

npm ERR! gyp ERR! node-gyp -v v8.3.0

npm ERR! gyp ERR! not ok 

npm ERR! node-pre-gyp ERR! build error 

npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node /Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)

npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)

npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:390:28)

npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)

npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)

npm ERR! node-pre-gyp ERR! System Darwin 21.3.0

npm ERR! node-pre-gyp ERR! command "/Users/xiaoqiangjiang/.nvm/versions/node/v16.13.2/bin/node" "/Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"

npm ERR! node-pre-gyp ERR! cwd /Users/xiaoqiangjiang/source/reddwarf/frontend/js-wheel/node_modules/canvas

npm ERR! node-pre-gyp ERR! node -v v16.13.2

npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.8

npm ERR! node-pre-gyp ERR! not ok

does anyone facing the same problem. what should I to to fix it or avoid this problem? The node version is 16.x. I have already tried to install pkgconfig like this:

brew install pkgconfig