Point style does not seem to apply when passed a canvas element from node-canvas

[Taelar]

Greetings

I'm rendering a line chart on a node server to return it as an image, I'm able to correctly render the chart and its data, however I experience a problem when trying to use a custom pointStyle.

My pointstyle element is created using the package node-canvas

Here's how I create my Chart and return it as an image :

const canvas = createCanvas(
  BASE_CANVAS_WIDTH,
  BASE_CANVAS_WIDTH / config.aspectRatio,
)

const customPoint = generateCustomPoint(someStyleOptions)

const chart = new Chart(canvas as any, {
  type: 'line',
  data: {
    datasets: [
      {
        data: myData,
        borderColor: borderColor,
        pointStyle: customPoint,
      },
    ],
  },
  options: SPEECH_AUDIOGRAM_CONFIG,
})

And the point is generated through this function :

import { Canvas, Image } from 'canvas'

const generateCustomPoint = (styleOptions: StyleOptions) => {
  const svgContent = `<svg>....</svg>`
  const svgSrc = `data:image/svg+xml,${svgContent}`
  
  const canvas = new Canvas(32, 32, 'svg')
  const imageElement = new Image()
  const ctx = canvas.getContext('2d')
  imageElement.onload = () => ctx.drawImage(imageElement, 0, 0)
  imageElement.src = svgSrc

  return canvas
}

I do something very similar client side and it works perfectly (obviously I'm not using node-canvas client side).
But server side the chart is rendered, but the default circle points are used.

I tried to export my custom point canvas separately to ensure its content is valid and it does render as expected.

Now I'm out of ideas on how to solve this problem, any idea is welcome.

Thank you 🙂

[Taelar]

In my desperation, I looked into the source code and its method drawPoint, and this caught my attention :

type = style.toString();
if (type === '[object HTMLImageElement]' || type === '[object HTMLCanvasElement]') {

So i tried to add to the above generateCustomPoint a 'dirty' line before the return
canvas.toString = () => '[object HTMLCanvasElement]'

And it does render my custom pointStyle with this (except it's not centered but that's still progress).

However I'm not a big fan of this solution, so I'm still interested if you have any other idea