How to add Embroidery Effect on Text font on Canvas Designer?

Question

Basically I want to create an Embroidery Effect on the text using FabricJS on Canvas Designer similar to the one in the attached image. . I do have all the stitches coordinates and stitching information. But I am not sure how should I make it render on canvas designer? Is it possible to do using FabricJS or any other library? Here is the example of how my coordinates look like. It would be really helpful if I can get some guidance on this matter. It would definitely help me learn new concepts and get better understanding thanks. This could be a really good reference Simulate kerning for a bitmapped font with Fabric JS

{
    "Data":{
       "Elements":
        [
          {
            "Name":null,
            "Filename":null,
            "Text":"TEXT",
            "TextType":null,
            "PositionX":0.0,
            "PositionY":0.0,
            "IsText":true,
            "IsTemplate":false,
            "Fonts":[
                {
                    "Name":"Argentia"
                }
            ],
            "Height":323.0,
            "Stitches":
            [
                {
                    "X":-540,
                    "Y":-36,
                    "X1":-540,
                    "Y1":-30,
                    "RelColor":0,
                    "Code":4,
                    "Jump":0
                },
                ...
                ...
                {
                    "X":609,
                    "Y":-237,
                    "X1":614,
                    "Y1":-240,
                    "RelColor":0,
                    "Code":0,
                    "Jump":0
                }
            ],
            "Palette":
            [
                {
                    "Blue":149,
                    "Red":18,
                    "Green":81,
                    "Alpha":0,
                    "Code":"1134",
                    "Name":"Royal Blue",
                    "Manufacturer":"Madeira Classic Rayon 40",
                    "RelColor":0,
                    "Value":null
                },
                ...
                ...
                {
                    "Blue":43,
                    "Red":100,
                    "Green":60,
                    "Alpha":0,
                    "Code":"1058",
                    "Name":"Chocolate",
                    "Manufacturer":"Madeira Classic Rayon 40",
                    "RelColor":0,
                    "Value":null
                }
            ],
            "ClientId":"2",
            "tempId":null
          }
      ]
    },
    "Success":true,
    "Errors":[]    
}