Server-Side Canvas on Netlify

If you've tried deploying node-canvas on Netlify, you may have encountered a few errors.

Incompatible Architecture

If you're deploying to Netlify using the CLI and you're not running linux, the errors may involve complaints about incompatible architecture.

node-canvas will build its binaries based on the architecture doing the install, so if you're deploying what you built locally (not linux) to Netlify (linux), it will complain. Easiest thing here is to do deploys via the Netlify's auto-deploy or via the UI so that the packages are built on the right architecture.

There's a way to npm install forcing the architecture, but at first thought this sounds like it may not run or build locally if it depends on the availability of local libs. Not sure, haven't tried.

Bundle Size Exceeded

If you're using node-canvas in functions you may get a successful build, but see an error to the effect of:

The function zip size is X MB, which is larger than the maximum supported size of Y MB

It will then show you the list of large files contributing to this issue, and they'll most likely be .so files in the node-canvas directory. The biggest offender tends to be librsvg.

If you need svg support, I'm sorry.

If you don't need svg support, the good news is that svg support is optional in node-canvas. You just have to build it without the modules you don't want.

The bad news is that while there are instructions for how to do this on the node-canvas wiki, getting it going on Netlify is not entirely straight-forward.

If you're building on linux, this may work if you do the custom build locally then deploy via CLI. If you're not using linux, you'll likely encounter the architecture issue above.

One solution I saw was to use a Docker/multipass instance to build a custom version of node-canvas then as part of the build process, copy those files the shared instance folder into node_modules before running the app build, but that sounded like a right pain in the derrière.

Some people said that worked for them though, so yay for them.

My Solution

Use pureimage instead.

It's not entirely a drop-in replacement for node-canvas, but it's close. There are a few quirks, but nothing I haven't got a comparatively straight-forward workaround for, and it beats faffing around with complicated build and deploy strategies.

Published October 22, 2022