FabricJs on Cloudflare Workers

[amardeepsingh20]

What would it take to get FabricJs working on Cloudflare Workers?
It can open up a lot of interesting applications.
https://workers.cloudflare.com/

Workers is built on V8 JS engine and has API similar to Service Workers.

Also, Canvas or even OfflineCanvas API is not available on CF Workers.

Any ideas?

[asturur]

well no canvas no fabricjs. The can it run the webasm canvas inplementation of skia?

[amardeepsingh20]

It does support WASM
https://developers.cloudflare.com/workers/platform/languages#wasm-supported

I have no understanding of wasm yet though..

[asturur]

you can have a look at the library that deno canvas uses to create the canvas. Is a google port of skia on wasn

[amardeepsingh20]

Thanks for the direction. I tried https://www.npmjs.com/package/canvaskit-wasm with a basic test to see if Canvas API can be used..

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  try {
    const CanvasKitInit = require('canvaskit-wasm/bin/canvaskit.js')
    CanvasKitInit().then(CanvasKit => {
      // Code goes here using CanvasKit
      let skcanvas = CanvasKit.MakeCanvas(600, 600)

      let ctx = skcanvas.getContext('2d')
      let rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300)

      // Add three color stops
      rgradient.addColorStop(0, 'red')
      rgradient.addColorStop(0.7, 'white')
      rgradient.addColorStop(1, 'blue')

      ctx.fillStyle = rgradient
      ctx.globalAlpha = 0.7
      ctx.fillRect(0, 0, 600, 600)

      let imgData = skcanvas.toDataURL()
      return new Response(imgData)
    })
  } catch (error) {
    return new Response(error)
  }
}

I am having 2 issues for now:

1. I get an error "EvalError: Code generation from strings disallowed for this context". CF Workers do not allow 'eval()' or 'new Function()' for security reasons and it seems that this package is using 'new Function()'
2. Built project size is 3 MB which is more than the limit of 1MB for script size. Cloudflare team has hinted that this limit may be removed soon.

So, let's say these issues were to get fixed, how can I then use FabricJs to work with canvaskit-wasm considering that window and document objects are also not available in CF Workers environment.

[asturur]

I'm not expert with canvaskit, i m not sure if is compatible with workers. You may need to end up writing your own offScreencanvas routine if they will support it, or contact canvas-kit authors to see if they have a plan

[amardeepsingh20]

Understood.
However, if I am able to get the canvaskit/offscreencanvas working in workers what would be the next steps to make FabricJs use that canvas? How can I configure FabricJs to use the offscreencanvas instead of the regular canvas (or node-canvas)?

[asturur]

that we would have to do it together somehow, the actual implementation relies on jsdom, but i m not married to it