fabric js canvas doesn't render images

I put an image and a textbox on a FabricJS canvas, but only the textbox is rendered. I also tried to export the whole canvas as an image, but still, only the textbox showed up. If I print out all objects on canvas in the console, the image instance is there, but why it's not rendered? Here is the JS Fiddle,

Here is the full HTML file

<!DOCTYPE html>
<html>
  
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

</head>
<style>
    #c {
    border: 2px solid black;
    }

    #render {
        border: 2px solid red;
    }
</style>
  
<body>
    <h2>This is the test image</h2>
    <img id='testImg' src="https://picsum.photos/seed/123/50/50" crossorigin="anonymous">
    <h2>Fabric canvas</h2>
    <canvas id='c'></canvas>
    <h2>Save canvas as an image</h2>
    <div id='render'></div>
  
    <script>
        var canvas = new fabric.Canvas('c');
        canvas.setHeight(200);
        canvas.setWidth(200);
        
        //add image 
        var imgEle = $("#testImg")[0];
        var newImg = new fabric.Image(imgEle, {
            left: 0,
            top:0
        });
        canvas.add(newImg);
        canvas.renderAll();
        
        //add new textbox
        var newTextBox = new fabric.Textbox("Hello text box", {
        left: 0,
        top: 100,
        width: 200
        });
        canvas.add(newTextBox);
        canvas.renderAll();

        //two objects are stored in canvas
        console.log(JSON.stringify(canvas));

        //show the canvas image, only one object shows
        var canvasUrl = canvas.toDataURL('png');
        var canvasImg = $("<img id=canvasImg>");
        canvasImg.attr('src', canvasUrl);
        canvasImg.appendTo("#render");
        
    </script>
</body>
</html>

Solution

In your code you are not waiting for the image to load, so what happens is that the new fabric.Image executes before the image has fully loaded, that is why you only see the text.
We need an onload on the image.

See the code below:

var canvas = new fabric.Canvas('c');
canvas.setHeight(120);
canvas.setWidth(200);

$("#testImg")[0].onload = function () {
  var newImg = new fabric.Image(this, { left: 10, top: 10 });
  canvas.add(newImg);
  canvas.renderAll();
}


var newTextBox = new fabric.Textbox("Hello", { left: 0, top: 70, width: 90 });
canvas.add(newTextBox);
canvas.renderAll();

#c {
  border: 2px solid black;
}

#render {
  border: 2px solid red;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  
This is the test image
<img id='testImg' src="https://picsum.photos/seed/123/50/50" crossorigin="anonymous">

<canvas id='c'></canvas>