Appending external library object to a div

In my javascript file, I have this object that I would like to append to a div element. I've tried div.appendChild but that doesn't work because the object isn't a node and when I use either append or addAdjacentHTML all I get is text like, #<fabric.Canvas (1): { objects: 1 }>. The object is just a new instance gotten from an external library I've added and this should be working well but idk whats up.
How can I add the object to the div element?

code

tryBtn.addEventListener('click', () => {
                  const editor = document.createElement('div');
                  const toolbar = document.createElement('div');
                  const canvas = document.createElement('canvas');
                  const closeBtn = document.createElement('button');
                  const img = document.createElement('img');

                  // Close Button hovering above
                  closeBtn.innerText = `X`;
                  closeBtn.setAttribute('style', `background-color: #ffffff; height: 30px; width: 30px;  z-index:10000; position: absolute; right: 20px; top: -50px; border-radius: 100px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;`);
                  closeBtn.addEventListener('click', () => {
                    document.body.removeChild(editor);
                  });

                  img.src = chrome.runtime.getURL('textIcon.svg');
                  img.style.cursor = "pointer";
                  
                  // Canvas editor and its attributes
                  canvas.setAttribute('style', `border-radius:10px;`);
                  const canv = new fabric.Canvas(canvas, {
                    backgroundColor: "white",
                    width: 540,
                    height: 300,
                  });

                  const text = new fabric.IText('Type text here', { 
                    left: 130, 
                    top: 120,
                    fontFamily: family,
                  });

                  canv.add(text);
                  canv.renderAll();

                  editor.setAttribute('style', 
                  `
                  background-color:#ffffff;
                  border-radius:10px;
                  width:600px;
                  height:300px;
                  position:fixed;
                  top:0;
                  left:0;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  text-align:center;
                  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
                  `);

                  toolbar.setAttribute('style', 
                  `
                  position:absolute;
                  top:50%;
                  right:20px;
                  background-color:#eeeeee;
                  width:50px;
                  height:260px;
                  border-radius:7px;
                  transform: translate(0%, -50%);
                  padding: 10px 0px;
                  `);
                  toolbar.appendChild(img)

                  editor.appendChild(closeBtn);
                  editor.append(canv); //Where the problem lies
                  editor.appendChild(toolbar);
                  
                  document.body.appendChild(editor);
                });
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum