From json to image using fabricjs

I am saving a fabricjs canvas on my database as a json. I've got no intention of modifying it, I just want to recover it, resize it and finally create a PNG or JPG image, which I will add in my web page.

By the moment, I've done the following:

• I create a canvas html element and I hide it
• I load de json on it (this works)
• From that canvas, I obtain it's context, I resize it and I get the dataURL (I obtain an apparent good url)
• I create an html element and I match the dataURL with the img src

It seems to work, but the image is transparent. The size its ok but it hasn't got anything inside. I would like to do this without having to create a canvas element and hidding it. Something like, create a var on js script, load the json on it, resize it,getting the dataurl and set it on a element.

var execisesList;
var canvas = new fabric.Canvas('canvasHiddenElement');

$(document).ready(function () {
var login = $.session.get("login");

$.ajax({
    url: backEndpoint + "usuarios/" + login + "/ejercicios",
    headers: {
        "Content-Type": "application/json"
    },
    method: "GET"
    })
    .done(function (data, textStatus, xhr) {
        execisesList = data;
        addExercise(execisesList[3].title,execisesList[3].description,execisesList[3].canvasJSON);
    })
    .fail(function (xhr, textStatus, errorThrown) {


    });
 });


function addExercise(title, description, canvasJSON) {
    var $execiseContainer = $('<div>',
        { class: "row ejercicio m-1 rounded border border-secondary" });

    var $imageContainer = $('<div>',
    { id: "img",class: "col-7 p-1" });
    canvas.loadFromJSON(canvasJSON, canvas.renderAll.bind(canvas));
    var url = canvas.toDataURL();
    var $img = getImage();
    $imageContainer.append($img);

    var $bodyContainer = $('<div>',
    { class: "col" });

    $('<div>', { class: "row h4 p-1" }).text(title).appendTo($bodyContainer);
    $('<div>', { class: "row  p-1" }).text(resumirdescription(description)).appendTo($bodyContainer);

    var $buttonContainer = $('<div>',
    { class: "col-1  p-1" });

    $('<button>', { class: "btn btn-success btn-block p-2" }).appendTo($buttonContainer);
    $('<button>', { class: "btn btn-primary btn-block p-2" }).appendTo($buttonContainer);
    $('<button>', { class: "btn btn-warning btn-block p-2" }).appendTo($buttonContainer);
    $('<button>', { class: "btn btn-info btn-block p-2" }).appendTo($buttonContainer);
    $('<button>', { class: "btn btn-danger btn-block p-2" }).appendTo($buttonContainer);



    $execiseContainer.append($imageContainer);
    $execiseContainer.append($bodyContainer);
    $execiseContainer.append($buttonContainer);

    $("#contenedorEjercicios").append($execiseContainer);
}

function getImage() {

    var w = 343;
    var h = 300;

    var resizedCanvas = document.createElement("canvas");
    var resizedContext = resizedCanvas.getContext("2d");

    resizedCanvas.height = ""+h;
    resizedCanvas.width = ""+w;

    var canvas = document.getElementById("canvasHiddenElement");
    var context = canvas.getContext("2d");

    resizedContext.drawImage(canvas, 0, 0, w, h);
    var myResizedData = resizedCanvas.toDataURL();

    return $('<img>').attr("src", myResizedData);

}

I don't know why but calling this function when I press a button it works as it shoulds, but I need it to work when the page is load.

this is what I get when the page loads

this is what I want to get