Make stroke work for emojis

[Materuilist]

System: built by Docker image node:18-alpine
Fabric version: 6.0.0
Fonts configuration: I have all needed fonts installed + my font config is configured to work with Noto Color Emoji and emoji render properly except for stroke scenario.

Issue: when rendering a text, containing emojis and having stroke enabled my emojis simply dont render.

Code snippet (result in the first screenshot):

const canvas = new fabric.StaticCanvas(null, {
        width: 300,
        height: 100,
        backgroundColor: 'green',
      })

      const ctx = canvas.getContext()
      ctx.textDrawingMode = 'glyph'

      const text = new fabric.Textbox('😆Open Sans', {
        fontFamily: 'Open Sans',
        fontSize: 24,
        width: 250,
        fillRule: 'nonzero',
        paintFirst: 'stroke',
        globalCompositeOperation: 'source-over',
        fill: '#fff',
        strokeWidth: 8,
        stroke: 'red',
        strokeDashArray: [1, 0],
        strokeLineCap: 'butt',
        strokeDashOffset: 0,
        strokeLineJoin: 'miter',
        strokeUniform: false,
        strokeMiterLimit: 4,

      })

      canvas.add(text)
      canvas.renderAll()

If I set strokeWidth=0 and stroke=null, then I will get screenshot 2

[asturur]

i m not sure what textDrawingMode is on ctx. Can you link to some documentation for that?

Does the stroke on emoji work on browse?

[Materuilist]

@asturur textDrawingMode doesn't really affect the rendering output as I see, so it can be skipped in the example I linked, sorry for that
Still here is the description from node-canvas https://github.com/Automattic/node-canvas?tab=readme-ov-file#canvasrenderingcontext2dtextdrawingmode

Yes, the stroke on emoji works in browser. I dont think it is related to the fact that browser and Node use different canvases, bcs I have such a Node sandbox (forked from 6.0 Node sandbox) which renders stroke for emojis fine (screenshot 1) https://codesandbox.io/p/live/345dcf6f-f7c8-43b4-8b4a-31e33b91ef83

This sandbox only has Dejavu font installed, so I assume canvas uses Dejavu for both emoji and and regular text rendering. My real environment has such font config, that it should use Noto Color Emoji for emojis rendering (it is needed for complex emojis with ZWJ 🧝‍♂️ for example). If Dejavu is used with ZJW it will fail like this (screenshot 2), while Noto Color Emoji renders fine until stroke is used

[asturur]

I m not sure a color font like noto emoji can be decorated with a strokeText, it wouldn't make much sense.
Are you able to obtain in a browser noto emoji with a stroke? i know monochromatic fonts just work fine with storke and fill.
You can be sure is not fabricJS fault because it doesn't do anything different between browser and node on the canvas, the same command is running.
Is either not supported at all by the font, or is a node canvas issue

[Materuilist]

In browser it doesn't draw stroke, but at least it renders an emoji, it is good enough for me

[asturur]

Make stroke work for emojis is a very poor title with no extra explanations. You don't mention once that you are ok with just the emoji rendering. Use style in the text object and set the style for the emoji with stroke as 0. I can't see another solution if node-canvas default with stroke applied to this font.

[Materuilist]

Sorry, I didnt mention that before, but I was trying to understand why stroke doesn't work and with your answer I understood it is not possible, thats why I am fine with having no stroke just for emojis.
Still, setSelectionStyles({ strokeWidth: 0 }, 0) doesn't help - Emoji simply doesn't render at all

[asturur]

i have to replicate this in some way and check what is going on