TypeError: Cannot set property 'font' of null

[xiakehc]

[xiakehc]

how to solve?

[atkinchris]

Are you using node-canvas, with Cairo installed, and passing the canvas and context in the options?

[atkinchris]

@hktalent - as per my comment above, are you using node-canvas, and passing the canvas and it's context
as canvas and context respectively in the options object?

const { createCanvas } = require('canvas')
const vectorizeText = require('vectorize-text')

const width = 200
const height = 200
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

vectorizeText('Hello world', {
  font: 'Sans-serif',
  width,
  canvas,
  context,
})

[GuiRitter]

I adapted the example provided in the read me with the comment above and this is what I'm seeing:

example.js

const { createCanvas } = require('canvas')
var vectorizeText = require("vectorize-text")

const width = 500
const height = 80
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

var graph = vectorizeText("Hello world! 你好", {
  //width: 500,
  textBaseline: "hanging",
  font: 'Sans-serif',
  width,
  canvas,
  context,
})

var svg = ['<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="500"  height="80" >']
graph.edges.forEach(function(e) {
  var p0 = graph.positions[e[0]]
  var p1 = graph.positions[e[1]]
  svg.push('<line x1="' + p0[0] + '" y1="' + p0[1] +
    '" x2="' + p1[0] + '" y2="' + p1[1] +
    '" stroke-width="1" stroke="black" />')
})
svg.push("</svg>")

console.log(svg.join(""))

EDIT: for those looking for a solution, I reccomend text-to-svg instead.