Trying to run *textwrap* on a canvas on Node environment

[bacloud23]

Hi, I had textwrap built and installed on my node environment, I also generated a canvas by pureimage as there is no native canvas in Node. pureimage is supposed to implement the same specification of browser canvas, so hopefully it would run.

But still, I'm having a problem calling the final function draw_wrapped_text

This is the error:

service1 | WARNING. Can't find font family { family: 'sans-serif', size: 20 } service1 | panicked at 'called Result::unwrap() on an Err value: JsValue(TypeError: Cannot read properties of undefined (reading 'font') service1 | TypeError: Cannot read properties of undefined (reading 'font') service1 | at measureText (/usr/src/app/node_modules/pureimage/dist/pureimage-umd.cjs:6398:18) service1 | at Context.measureText (/usr/src/app/node_modules/pureimage/dist/pureimage-umd.cjs:7775:20) service1 | at /usr/src/app/node_modules/textwrap-wasm-demo/textwrap_wasm_demo.js:549:33 service1 | at handleError (/usr/src/app/node_modules/textwrap-wasm-demo/textwrap_wasm_demo.js:224:18) service1 | at module.exports.__wbg_measureText_734acef1b5e2b3fd (/usr/src/app/node_modules/textwrap-wasm-demo/textwrap_wasm_demo.js:548:73) service1 | at wasm://wasm/00092a52:wasm-function[113]:0xd4e3 service1 | at wasm://wasm/00092a52:wasm-function[69]:0x9488 service1 | at module.exports.draw_wrapped_text (/usr/src/app/node_modules/textwrap-wasm-demo/textwrap_wasm_demo.js:210:14) service1 | at file:///usr/src/app/serv1/text.js:33:1 service1 | at ModuleJob.run (node:internal/modules/esm/module_job:193:25))', src/lib.rs:331:63

While this is Canvas generated by pureimage:

service1 | Context { service1 | bitmap: Bitmap { service1 | width: 100, service1 | height: 100, service1 | data: <Buffer 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 ... 39950 more bytes> service1 | }, service1 | _fillColor: 255, service1 | _strokeColor: 255, service1 | _lineWidth: 1, service1 | _globalAlpha: 1, service1 | _transform: Transform { service1 | context: undefined, service1 | matrix: [ 1, 0, 0, 1, 0, 0 ], service1 | stack: [], service1 | setContext: [Function (anonymous)], service1 | getMatrix: [Function (anonymous)], service1 | setMatrix: [Function (anonymous)], service1 | cloneMatrix: [Function (anonymous)], service1 | cloneTransform: [Function (anonymous)], service1 | asDomMatrix: [Function (anonymous)], service1 | fromDomMatrix: [Function (anonymous)], service1 | save: [Function (anonymous)], service1 | restore: [Function (anonymous)], service1 | setTransform: [Function (anonymous)], service1 | translate: [Function (anonymous)], service1 | rotate: [Function (anonymous)], service1 | scale: [Function (anonymous)], service1 | rotateDegrees: [Function (anonymous)], service1 | rotateAbout: [Function (anonymous)], service1 | rotateDegreesAbout: [Function (anonymous)], service1 | identity: [Function (anonymous)], service1 | isIdentity: [Function (anonymous)], service1 | multiply: [Function (anonymous)], service1 | invert: [Function (anonymous)], service1 | transformPoint: [Function (anonymous)] service1 | }, service1 | _font: { family: 'sans-serif', size: 20 }, service1 | textAlign: 'start', service1 | textBaseline: 'alphabetic', service1 | imageSmoothingEnabled: true, service1 | _clip: null, service1 | _fillStyle_text: '', service1 | _strokeStyle_text: '', service1 | states: [] service1 | }

Is it because of my object ? or the way I'm calling it (tried to replicate web demo example). My NodeJS code is simply:

import * as PImage from "pureimage"

const require = createRequire(import.meta.url);
const { draw_wrapped_text, WasmOptions, WasmPenalties } = require("textwrap-wasm-demo");

const canvas = PImage.make(100, 100)
let fontSize = 20;
let fontFamily = "sans-serif";

let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = `${fontSize}px ${fontFamily}`;
const penalties = new WasmPenalties(1000, 7500, 4, 100, 100)
let options = new WasmOptions(250, false, "AsciiSpace", "HyphenSplitter", "OptimalFit", penalties);
console.log(ctx)
draw_wrapped_text(ctx, options, "hello world", penalties);

Thanks a lot for your consideration.