I'm trying to get working canvas on node js. I'm using Windows Vista. After basic approach npm install canvas failed (see error below), I have looked up some tutorials, here is what I have tried:

sources:
installing-node-canvas-for-windows
LearnBoost/node-canvas/wiki/Installation---Windows

• I have installed older Python (2.7.5) and add it to PATH (and remove Python 3.2. from PATH)
• I have checked that I do have Microsoft Visual Studio 2010 Professional installed
• I have downloaded the 'all in one' GTK package from +/2.24/gtk+-bundle_2.24.10-20120208_win32.zip, unziped it in C:\GTK\ and add 'C:\GTK\bin' to PATH

log in console (after running npm install canvas in cmd):
log contains several warnings, I don't thing these are the problem - it is mostly something like 'conversion from double to float', and one error marked in red color:

init
d:\pathToApp\node_modules\canvas\src\PNG.h(5): fatal error C1083: Cannot
open include file: 'cairo.h': No such file or directory [d:\pathToApp\n
ode_modules\canvas\build\canvas.vcxproj]

And at the very end of log there is:

gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\
npm\node_modules\node-gyp\lib\build.js:267:23)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:789:
12)
gyp ERR! System Windows_NT 6.0.6002
gyp ERR! command "node" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modu
les\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd d:\pathToApp\node_modules\canvas
gyp ERR! node -v v0.10.16
gyp ERR! node-gyp -v v0.10.9
gyp ERR! not ok
npm ERR! weird error 1
npm ERR! not ok code 0

After that, nothing appeared in node-module folder (no canvas subdirectory, npm after unsuccessful installation removed the subdirectory).

So I have also tried to download canvas module manually from github, unzip it in node-modules and then run node-gyp configure in node-modules/canvas with success, and node-gyp build, which unfortunatelly gave me the same error Cannot open include file: 'cairo.h'.

I have read everything that I found on this carefully. If you can suggest any help, please do it.

I'm trying to get working canvas on node js. I'm using Windows Vista. After basic approach npm install canvas failed (see error below), I have looked up some tutorials, here is what I have tried:

sources:
installing-node-canvas-for-windows
LearnBoost/node-canvas/wiki/Installation---Windows

• I have installed older Python (2.7.5) and add it to PATH (and remove Python 3.2. from PATH)
• I have checked that I do have Microsoft Visual Studio 2010 Professional installed
• I have downloaded the 'all in one' GTK package from http://ftp.gnome.org/pub/gnome/binaries/win32/gtk+/2.24/gtk+-bundle_2.24.10-20120208_win32.zip, unziped it in C:\GTK\ and add 'C:\GTK\bin' to PATH

log in console (after running npm install canvas in cmd):
log contains several warnings, I don't thing these are the problem - it is mostly something like 'conversion from double to float', and one error marked in red color:

init.cc
d:\pathToApp\node_modules\canvas\src\PNG.h(5): fatal error C1083: Cannot
open include file: 'cairo.h': No such file or directory [d:\pathToApp\n
ode_modules\canvas\build\canvas.vcxproj]

And at the very end of log there is:

gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\
npm\node_modules\node-gyp\lib\build.js:267:23)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:789:
12)
gyp ERR! System Windows_NT 6.0.6002
gyp ERR! command "node" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modu
les\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd d:\pathToApp\node_modules\canvas
gyp ERR! node -v v0.10.16
gyp ERR! node-gyp -v v0.10.9
gyp ERR! not ok
npm ERR! weird error 1
npm ERR! not ok code 0

After that, nothing appeared in node-module folder (no canvas subdirectory, npm after unsuccessful installation removed the subdirectory).

So I have also tried to download canvas module manually from github, unzip it in node-modules and then run node-gyp configure in node-modules/canvas with success, and node-gyp build, which unfortunatelly gave me the same error Cannot open include file: 'cairo.h'.

I have read everything that I found on this carefully. If you can suggest any help, please do it.

• javascript
• windows
• node.js
• canvas
• cairo

• are you 32 or 64 bit? – Mathew Kurian Commented Oct 8, 2013 at 3:03
• any solutions to this – Muhammad Umer Commented Dec 26, 2013 at 20:03
• 32 bit | no solutions, after some time I gave up (using ubuntu) – venca163 Commented Mar 9, 2014 at 16:46
• 1 I have managed to get it working on Windows 8 (see description bellow). I am also sorry that I cant accept any solution, but this question seems to have no "the only right one" answer. – venca163 Commented Jan 19, 2015 at 10:40

5 Answers 5

I have managed to get it working on my new Windows 8 machine, so I want to share some details that can be helpful to others.

I am using:

• Windows 8.1 (64 bit)
• Visual Studio 2013 (update 2)
• Python 2.7.8
• GTK for Windows 64 bit (http://www.gtk.org/download/win64.php)
• node 0.10.28
• node-gyp 1.0.1

Procedure

Be sure to have Python 2 and GTK\bin in your path.

I have downloaded files manualy from https://github.com/Automattic/node-canvas and saved it to node_modules/canvas.

Then I run node-gyp configure build in canvas directory. Errors occured. I had to edit binding.gyp (https://github.com/Automattic/node-canvas/blob/master/binding.gyp) in order to match actual files in GTK folder.

For example:

• line 59: "(GTK_Root)/lib/libpng.lib" -> "(GTK_Root)/lib/libpng.dll.a"
• line 34: "(GTK_Root)/bin/libpng14-14.dll" -> "(GTK_Root)/bin/libpng15-15.dll"
• ...

There can be more, you should be able to read which files are making problems from error log and then edit the names to match files in GTK folder.

After editing binding.gyp, command node-gyp configure build finished successfuly. Although I am not able to work with some jpg files in Canvas (I have not tested it properly), png files work fine.

If node-gyp fails

It can happen to you, that every node-gyp command fails with message (possibly marked in red) similar to:

"...bcrypt_lib.vcxproj(47,46): error MSB4025: Could not load file project. An invalid character for the specified encoding., Line 47, position 46."

It it most probably because you have special character in the name of your user folder. (The fact, that Windows 8 automatically creates the name of your user folder from your first name is the lamest thing about Win 8).

2 quick solutions:

• create another user with normal (without special characters) name a and run node-gyp configure build from that account
• use this quick fix (it has worked for me): https://github.com/TooTallNate/node-gyp/pull/366

Hope this helps.

I managed to get this working on windows after a long arduous process. I have a last couple of suggestions that you might try that I had on my list.

Copy all the dll files from c:\GTK to the canvas\build\Release folder.

Copy IEShims.dll from c:\program files(x86)\Internet Explorer to the canvas\build\Release folder.

Then run node-gyp build.

Best of luck.

I ran into trouble with canvas while trying to install paperjs.

Here's what worked for me.

My specifics

• Windows 7 x64
• node-v0.10.26-x64
• GTK+ 2.22 x64

GTK

Make sure you read the README. There are necessary instructions here that I overlooked the first time around. For instance:

Run: pkg-config --cflags gtk+-2.0

Run: gtk-demo and verify that it works

Running pkg-config let me know that I needed to have <GTK Directory>\lib\pkgconfig in the PKG_CONFIG_PATH environment variable.

canvas

I used this as a guide: https://github.com/LearnBoost/node-canvas/wiki/Installation---Windows

NOTE: I have Visual Studio 2010, 2012 and 2013 installed on my machine, so I didn't have to deal with MSVC dependencies.

npm install canvas was always failing - and cleaning up after itself (the jerk) - so I grabbed the cached version from the npm-cache: %USERPROFILE%\AppData\Roaming\npm-cache\canvas\1.1.3\package. Copy this directory to your project's node_modules directory and rename it canvas. Enter the newly created canvas directory on the command line.

Run npm install nan.

Before you you can run node-gyp configure successfully, you need to verify your GTK path in binding.gyp

On line 5:

'GTK_Root%': 'C:/GTK', # Set the location of GTK all-in-one bundle

Now you can try node-gyp configure. If this is successful, awesome! Now you can build it: node-gyp build.

That should do it. If you were trying to install paper, now you can. Hooray!

If this doesn't work, or you have something to add, don't be shy! Please comment so we can all benefit.

Here is the most up-to-date information I've found on how to install the components required to run node-gyp which is in turn required to compile the code for canvas (and jsdom). I'm going to replicate it here in case the link dies. I have tested these instructions on my Win7 x64 machine and it worked first time.

On Windows XP/Vista/7, node-gyp requires Python 2.7 and Visual Studio 2010

According to the readme file in Microsoft Visual C++ 2010 Service Pack 1 Compiler Update for the Windows SDK 7.1, to ensure that your system has a supported configuration, uninstall the following products and then reinstall them in the order listed:

1. Visual Studio 2010
2. Windows SDK 7.1 Note: If you get error on installation, maybe this link will help you.
3. Visual Studio 2010 SP1
4. Visual C++ 2010 SP1 Compiler Update for the Windows SDK 7.1

On x64 environments, the last update in the list fixes errors about missing compilers and error MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found.

You will need cairo library which is bundled in GTK