環境

Windows 11
Node - v18.17.1
node-canvas - v2.11.2
node-gyp - v9.4.0
Visual Stadio Build Tool 2022
Python - v3.10.11, v2.7.18

1. (Option) Node.js のLTSをインストール

Node.js | https://nodejs.org/ja/download
※本稿ではNode.js-v18.17.1を使用

情報

比較的新しいバージョンのNode.jsであればwindows-build-toolsはNode.jsに同梱される為、インストール不要らしい

2023/8/23 現在パブリックアーカイブされた模様

注意

FNM+PowerShell環境だと（公式のsetup手順どおりにsetupしていれば）PowerShell起動時にfnm envが実行され環境変数のパスにWindows書式・UNIX書式が混在する事になる。その為node-gyp rebuildでビルド時に PowerShell 側でパスが解決できないエラーになる。

解決策としてFNMの管理外にNode.jsをインストールする必要がある

2. `node-canvas`のインストール

Windowsでのインストール手順

canvas | npm

2.1. `node-gyp`をインストール

Windowsでのインストール手順

2.1.1. Python 3.x をインストール

Python 3.x | Microsot Store

2.1.2. `Visual Studio Build Tools 2022`をインストール

Visual C++ ビルド環境をインストール

Visual Studio | Microsoft

2.1.3. `Python 2.7`をインストール

Download | Python(TM)

上記のページから Python 2.7.xを探すか、以下のリンクからDLしてインストール
Python 2.7.18 | Pyton(TM)

注意

Python 2.7のデフォルトのインストールディレクトリC:\Python2.7から変更（C:\Program Files\Python2.7等）した場合はメモしておく。後で使います。
Python 3.xとPython 2.7の両方を使うので、それぞれのバージョンを同居させる必要があります

2.1.4. `Python 2.7` を`npm`で使う`Python`に設定する

powershell

npm config set python python2.7

情報

ほぼエラると思うので、ここを参考に%USERPROFILE%\.npmrcに直接書く

python is not a valid npm option | StackOverflow

%USERPROFILE%\.npmrc

# Python 2.7 をインストールしたディレクトリを記述
python=C:\Python27

2.1.5. `Visual Stadio Build Tools 2017`を`npm`で使う`msvs`に設定する

PowerShell

npm config set msvs_version 2017

%USERPROFILE%\.npmrc

msvs_version=2017

無い場合はインストール（どこから？）

2.1.6. `node-gyp`をグローバルインストール

PowerShell

npm install -g node-gyp

2.2. `GTK 2`の導入

2.2.1. `GTK 2`のバイナリをDL

32bit OS用、64bit OS用のいづれか

2.2.2. DLしたバイナリを指定のディレクトリ（`C:\GTK`）に展開

こんな感じ

dir

C:\GKT
- \bin
- \build
- \etc
- \include
- \lib
- \man
- \manifest
- \share
- \src
- gtk+-bundle_2.22.1-20101229_win64.README.txt

2.3. `libjpeg-turbo`の導入

2.3.1. `libjpeg-turbo`バイナリのDL

32bit OS用、64bit OS用のいづれか

WIN32 - libjpeg-turbo-2.0.0-vc.exe | sourceforge.net
WIN64 - libjpeg-turbo-2.0.0-vc64.exe | sourceforge.net

2.3.2. DLした`.exe`をインストール

.exeをWクリック

WIN32 - C:\libjpeg-turbo
WIN64 - C:\libjpeg-turbo64

3. Project に`node-canvas`をインストール

3.1. プロジェクトディレクトリに移動する

bash

cd <project directory>

3.2. `node-canvas`をインストール

bash

# 本稿では test 目的でのインストールの為、--save-dev オプションを付与
npm install --save-dev --build-from-source canvas

3.3. (Option)`node-canvas`をリビルド

node-canvasは基本、各OS（macOS Linux Windows）のバイナリがインストールされるが、プロセッサーが合わない場合、正しく動作しない（らしい）。
その場合、システム上でビルドをし直す必要がある。

3.3.1. (Option)`Node.js`-`v18.17.1`のヘッダーをインストールする

以下の様なエラーがでる場合、必要

FetchError: request to https://nodejs.org/download/release/v18.17.1/node-v18.17.1-headers.tar.gz failed, reason: connect ECONNREFUSED 2606:4700:10::6814:172e:443

参考 StackOverflow

DLリンク

node-v18.17.1-headers.tar.gz | nodejs.org

3.3.2. `node-canvas`がインストールされた`node_modules`ディレクトリに移動する

bash

cd node_modules/canvas

3.3.3. `node-gyp`でリビルド

bash

# <user>はOSのログインユーザー名
$ node-gyp rebuild --verbose --nodedir="C:\Users\<user>\.node-gyp\18.17.1"

ext. プロジェクトの`Node.js`バージョンを固定する

FNMの利用が前提
Node.js - v18でビルドしたcanvasはNode.js - v18でしか動作しない

bash

$ fnm use 18

$ fnm current
v18.17.1

$ node -v > .node-version

了