Uncouple from node-canvas.

[VictorioBerra]

node-canvas requires node gyp and its a nightmare to use with things like electron or docker. Is there a way to fully uncouple from canvas and instead have an abstraction where the user can decide?

For example, svg is a good start but if I install Trianglify I am forced to download node-canvas even if I dont want it.

Maybe some possible alternatives:

• http://joshmarinacci.github.io/node-pureimage/
• http://camanjs.com/

[VictorioBerra]

Thinking about this more. Could we have Canvas be a peer dependency, that is not needed in browser, but in node, if it exists, pattern.js will try and create a canvas from it. We could have it in devDependencies for Jest.

[qrohlf]

@VictorioBerra I've gone back and forth on this a fair amount. node-canvas was previously an optionalDependency, but that created UX issues with developers (and frankly the npm behavior around optional deps is really confusing/bad).

The latest version of node-canvas includes a browsers: implementation that just shims to the native HTML5 canvas implementation. If you're building for a browser or browser-like runtime, your build tool should be using this shim rather than trying to boot up node-canvas itself.

Can you give a specific example of your use case and the pain point that you're hitting? Both pureimage and camanjs look interesting, but I'm hesitant to swap out a dependency that has served this project well for 5+ years without more information.

[VictorioBerra]

My issue is mainly with Electron. Since electron is being built on Node it will still fire up the node-gyp try and download the precompiled binary but none exists. Even though electron uses Chrome, any native dependencies like node-canvas are still re-built.

I definitely understand your point about optionalDependency nightmares, and not wanting to move away from it.

Maybe the solution is for me to just fork and publish a non none-canvas build so that it works for my niche usecase. Although I wish there was an easy way for this to be more optional. Just like Jest and Canvas.

The following happens during an npm i

PS C:\Users\toryb\Desktop\triangle-wallpaper> npm i

> triangle-wallpaper@0.1.0 postinstall C:\Users\toryb\Desktop\triangle-wallpaper
> electron-builder install-app-deps

  • electron-builder  version=22.9.1
  • rebuilding native dependencies  dependencies=canvas@2.6.1 platform=win32 arch=x64
  ⨯ cannot execute  cause=exit status 1
                    out=
    > canvas@2.6.1 install C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas
    > node-pre-gyp install --fallback-to-build

    Building the projects in this solution one at a time. To enable parallel build, please add the "-m" switch.
      Backend.cc
      ImageBackend.cc
      PdfBackend.cc
      SvgBackend.cc
      BMPParser.cc
      Backends.cc
      Canvas.cc
      CanvasGradient.cc
      CanvasPattern.cc
      CanvasRenderingContext2d.cc
      closure.cc
      color.cc
      Image.cc
      ImageData.cc
      init.cc
      register_font.cc
      win_delay_load_hook.cc
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\ImageBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\ImageBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\Backend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\Backend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasPattern.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasPattern.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\ImageData.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\ImageData.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\PdfBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\PdfBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasGradient.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasGradient.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\SvgBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasRenderingContext2d.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\SvgBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasRenderingContext2d.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Backends.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Backends.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Canvas.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Canvas.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\closure.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\closure.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Image.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Image.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\init.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\init.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\backend\ImageBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\backend\ImageBackend.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\backend\Backend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\backend\Backend.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\ImageData.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\ImageData.cc)
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\backend\PdfBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\backend\SvgBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\Backends.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\CanvasGradient.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\CanvasGradient.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\CanvasPattern.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\CanvasPattern.cc)
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\Canvas.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\closure.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\init.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]   
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\init.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\Image.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]  
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\Image.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\CanvasRenderingContext2d.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\CanvasRenderingContext2d.cc)
    Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js build --fallback-to-build --module=C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\Release --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=electron-v9.3' (1)

                    errorOut=node-pre-gyp WARN Using request for node-pre-gyp https download
    node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v9.3-win32-unknown-x64.tar.gz
    node-pre-gyp WARN Pre-built binaries not found for canvas@2.6.1 and electron@9.3.4 (electron-v9.3 ABI, unknown) (falling back to source compile with node-gyp)
    gyp ERR! build error
    gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin\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:194:23)
    gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
    gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
    gyp ERR! System Windows_NT 10.0.19041
    gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "build" "--fallback-to-build" "--module=C:\\Users\\toryb\\Desktop\\triangle-wallpaper\\node_modules\\canvas\\build\\Release\\canvas.node" "--module_name=canvas" "--module_path=C:\\Users\\toryb\\Desktop\\triangle-wallpaper\\node_modules\\canvas\\build\\Release" "--napi_version=7" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=electron-v9.3"
    gyp ERR! cwd C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas
    gyp ERR! node -v v14.15.0
    gyp ERR! node-gyp -v v5.1.0
    gyp ERR! not ok
    node-pre-gyp ERR! build error
    node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js build --fallback-to-build --module=C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\Release --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=electron-v9.3' (1)   
    node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
    node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
    node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:1048:16)
    node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
    node-pre-gyp ERR! System Windows_NT 10.0.19041
    node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\toryb\\Desktop\\triangle-wallpaper\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build"
    node-pre-gyp ERR! cwd C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas
    node-pre-gyp ERR! node -v v14.15.0
    node-pre-gyp ERR! node-pre-gyp -v v0.11.0
    node-pre-gyp ERR! not ok
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! canvas@2.6.1 install: `node-pre-gyp install --fallback-to-build`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the canvas@2.6.1 install script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\toryb\AppData\Roaming\npm-cache\_logs\2020-11-19T00_59_58_550Z-debug.log

                    command='C:\Program Files\nodejs\node.exe' 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js' rebuild canvas@2.6.1
                    workingDir=
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! triangle-wallpaper@0.1.0 postinstall: `electron-builder install-app-deps`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the triangle-wallpaper@0.1.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\toryb\AppData\Roaming\npm-cache\_logs\2020-11-19T00_59_58_820Z-debug.log

You can see: WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v9.3-win32-unknown-x64.tar.gz

[qrohlf]

That makes sense, there's no prebuilt version available so it blows up. It's also definitely not ideal that users with supported architectures who only need the browser shim have to download the whole node-canvas package including a heavy binary, despite only needing about 15 lines of JS from it. I'd like to improve the situation, I'm just a bit cautious because my past attempts (using peerDependencies and optionalDependencies) to try to resolve this issue have led to more developer confusion versus less.

Brainstorming a little bit here:

• Pureimage doesn't have a stable release yet, doesn't have a ton of momentum/contributors, and generally isn't a super mature project. It's a cool initiative, but it's not at the point where I'm comfortable using it as a dep for a package this popular.
• Camanjs looks like it's a library for manipulating bitmap images (contrast/brightness/hue/etc adjustments), not a general purpose 2d graphics library.
• I think it's unlikely that anything will unseat node-canvas here. Automattic has been really generous about contributing time/resources to the project, the fact that it's doing the heavy lifting in C++ means it blows JS drawing libraries out of the water performance-wise. On the other hand, it's built on top of Cairo, which is shaky ground to build on these days. I wonder if they're going to migrate to Skia?

The thing that might make the most sense would be to publish a separate trianglify-browser package in addition to the core trianglify package - the only difference between the two would be that instead of pulling in node-canvas, trianglify-browser would have its own createCanvas shim instead. This could potentially eliminate some pain as well when developers are trying to use trianglify with a module bundler that isn't respecting the "browsers" field correctly.

@VictorioBerra - would publishing a trianglify-browser package without the node-canvas dep solve your issue? It seems like it would.

[VictorioBerra]

Yes I think that's the best course of action. I was going to do that myself tomorrow. But I'd rather it come from you that way it benifits from all the updates and issues here.

Would you want to publish a core library to be used by both? That way you don't have duplication.

[qrohlf]

@VictorioBerra as long as the only difference is the absence of the node-canvas dep, the code between the two libraries will be 100% identical. I think what I'm going to do is just tweak my deploy automation so that the browser UMD build gets published as its own module with the appropriate package.json tweaks, that way everything "Just Works" without having to add a third "trianglify-core" module into the mix.

[VictorioBerra]

Sounds great I look forward to testing it!

[VictorioBerra]

@qrohlf https://github.com/VictorioBerra/trianglify-desktop-wallpaper
See it in action on Linux via the Snap Store https://snapcraft.io/triangle-wallpaper release GPLv3 in accordance with Trianglify license.
For now, I released Trianglify no-canvas so I could push forward and keep working on the app: https://www.npmjs.com/package/@victorioberra/trianglify-browser

But id love to switch to your official package when you get this done.

Thanks for making this library!

[knrdl]

I would also love to see an official trianglify-browser package on npm. That could reduce confusion about what package to use.

[qrohlf]

@knrdl agree that it's confusing!

I want to avoid publishing two different packages since there are projects (including the project that funds this library) that do use on Trianglify on both the server-side and the browser and it's very helpful to have a single package to ensure that the browser and server rendering of patterns is always deterministic and matches.

This package is in fact fully browser-compatible, as node-canvas just exports a very thin shim with no dependencies when imported in a bundler/browser environment.

The real problem is that installation of node-canvas will fail when you try to compile native binaries for the server-side implementation of node-canvas on a machine without the correct dependencies installed. This is especially problematic for folks who are building projects within environments like Docker or Electron.

In the past I've listed node-canvas as an optionalDependency so that the npm install doesn't fail if the native build fails. However, I think the behavior in modern package installers is to remove the JS source files for optionalDependencies if the native build fails, which means that the node-canvas shim won't be available and the browser package build will fail as a result.

@knrdl For now, the situation is that this package is the official browser implementation of Trianglify, and it requires an environment where node-canvas can be installed in order to use it. I'm open for suggestions on how to work around this limitation if you have any ideas.

@VictorioBerra could you please either update your package to track the latest version of Trainglify, or un-publish your package/mark it deprecated so that module consumers are not confused?

[VictorioBerra]

could you please either update your package to track the latest version of Trainglify, or un-publish your package/mark it deprecated so that module consumers are not confused?

@qrohlf I listed my package with the prefix @VictorioBerra/ to try and make it clear its a fork from my account, to install it you would need the full prefix IE: npm i @victorioberra/trianglify-browser. I do not think this is too confusing.

What do I need to do to update my package? My package is a fork of trianglify, it does not depend on it.

[knrdl]

I am currently using the version provided by @VictorioBerra . My goal is to use trianglify client side but in a Sveltekit project (nodejs server). The builds are handled by docker. So I run into the exact problems @qrohlf described in detail above.
If I want to use the official package (instead of @victorioberra/trianglify-browser) I would have to do something like:

npm i
npm i trianglify || exit 0

this workaround is just a bit ugly ...