Rebuilding node-canvas with electron-rebuild fails

[lqomg]

Rebuilding node-canvas with electron-rebuild fails

• canvas@2.10.2
• node 18.10.0 on Win10:
• Visual Studio 2017
• electron@21.x

[lqomg]

If it is in electron@18.x The following error occurs when building。

Same issue: 2165

[motopeco]

@linqian02

I have the same issue.

Perhaps @napi-rs/canvas could be used instead of node-canvas.
In my case, I have successfully used Chart.js in Electron's MainProcess.
(It took a little ingenuity though)

• Windows11
• Nodejs 18.12.1
• Electron 18.3.15
• napi-rs/canvas 0.1.36

https://github.com/Brooooooklyn/canvas

[lqomg]

@linqian02

I have the same issue.

Perhaps @napi-rs/canvas could be used instead of node-canvas. In my case, I have successfully used Chart.js in Electron's MainProcess. (It took a little ingenuity though)

• Windows11
• Nodejs 18.12.1
• Electron 18.3.15
• napi-rs/canvas 0.1.36

https://github.com/Brooooooklyn/canvas

Thank you for your reply！I will try to see if it is feasible

[ajoslin103]

Most of the problems around Canvas in Electron (as I understand it) is that the canvas [node-cavas] module is not context aware.

ref: #1394

[ajoslin103]

Switching to the N-API version would satisfy using Canvas in Electron programs

https://www.electronjs.org/blog/electron-11-0#final-step-for-requiring-native-node-modules-to-be-context-aware-or-n-api-in-electron-12

[lqomg]

Switching to the N-API version would satisfy using Canvas in Electron programs

https://www.electronjs.org/blog/electron-11-0#final-step-for-requiring-native-node-modules-to-be-context-aware-or-n-api-in-electron-12

@ajoslin103
Node-canvas uses Nan instead of N-API。

Is it not possible to use node-canvas in Electron?

[lqomg]

Switching to the N-API version would satisfy using Canvas in Electron programs

https://www.electronjs.org/blog/electron-11-0#final-step-for-requiring-native-node-modules-to-be-context-aware-or-n-api-in-electron-12

I also found that headless-gl could not be electron@21 Rebuild succeeded.

It also uses nan instead of n-api.

Whether it is the nodejs native module developed by nan that is no longer supported by electron？

[ajoslin103]

@linqian02 you can follow the comments on this pr #1981 to see the progress this module is making towards being context-aware and this discussion at electronjs to read more about the issue electron/electron#18397

[lqomg]

@ajoslin103

Thank you. I'll try again to see if it's feasible

[GitMurf]

@linqian02 fyi for a full history on this see the following GH issues that I have opened across Electron, Node, pdf.js and node-canvas repos (as they all have a part in my issues which sound similar to yours).

The TLDR is that until node-canvas decides to migrate from NaN to the napi/N-API/node-addon-api (they use a lot of different names haha) then node-canvas will not work with Electron (and for me unfortunately since pdf.js has node-canvas as a dependency, I am not able to use pdf.js either).

In 2017 the Node Addon API team actually made a port of node-canvas, but it has sense become VERY outdated and does not work. See here: #923

Here are the relevant issues that I found / accumulated over my several weeks of research:

electron/rebuild#1042
nodejs/node-addon-api#1250
mozilla/pdf.js#15672
electron/rebuild#1042 (comment)
#2165
nodejs/nan#892
nodejs/nan#922 (comment)
GitMurf/help#2 - I created this repo to try to start tackling conversion to N-API but I ran out of patience and time :( so have not gotten any further.

[ajoslin103]

I have found that the FabricJS canvas library (browser-pure, I think) works just fine with electron !!

I've been using canvas w/Fabric with my Electron project with no issues

I found out when I saw this project that uses Fabric just as a Canvas (I think) https://blog.logrocket.com/build-indoor-maps-fabric-js-react/ (I was unable to figure out how it was making any Fabric calls)

[tpae]

I have found that the FabricJS canvas library (browser-pure, I think) works just fine with electron !!

I've been using canvas w/Fabric with my Electron project with no issues

I found out when I saw this project that uses Fabric just as a Canvas (I think) https://blog.logrocket.com/build-indoor-maps-fabric-js-react/ (I was unable to figure out how it was making any Fabric calls)

Thanks for this, I've tested it, and it is correct.