HTML5 / JavaScript Canvas: Text on Image on Click

Question

StackOverflow community, I'm fairly new to JavaScript programming and I'm having some issues with the HTML5/JavaScript Canvas Combo.

The idea is to, following the click of a button, to verify some lines and, then, show on the screen the image (pre-defined) with some text in specific coordinates, the text depends on the input value, as they are stored in an Array.

The thing is, I'm not being able to draw the text on the Image, only the Image appears. The code goes as follows:

Globally Defined:

...
canvas = document.getElementById("cvs"),
ctx = canvas.getContext('2d'),
...

The Draw() function:

function draw() {
if (img_is_loaded) {

img = document.getElementById("background-A");

    var maxh = 600,
    maxw = 900,
    height = img.height,
    width = img.width,
    name_input = name[0],
    note_input = note[0],
    date_input = date[0],
    sur_input = sur[0];

    while (height > maxh || width > maxw) {
        --height;
        --width;
    }

    canvas.height = height;
    canvas.width = width;
    ctx.save();
    ctx.clearRect(0, 0, width, height);

    ctx.drawImage(img, 0, 0, width, height);

    ctx.font = "54px Times Roman";
    ctx.fillStyle = "#000000";
    ctx.fillText = (name_input, 35, 320);

    ctx.font = "21px Times Roman";
    ctx.fillStyle = "#000000";
    ctx.fillText = (note_input, 61, 432);
    ctx.fillText = (date_input, 254, 501);
    ctx.fillText = (sur_input, 254, 528);


    }


} else {
    setTimeout(draw, 100);
}
}

I'm getting the Image, but no text. I'm aware that the issue, normally, is that I need to draw them "at the same time", so I tried:

function draw() {
if (img_is_loaded) {


var imageObj = new Image();
imageObj.onload = function(){
    var maxh = 600,
    maxw = 900,
        height = imageObj.height,
        width = imageObj.width,
        name_input = name[0],
    note_input = note[0],
    date_input = date[0],
    sur_input = sur[0];

    while (height > maxh || width > maxw) {
        --height;
        --width;
    }

    canvas.height = height;
    canvas.width = width;
    ctx.save();
    ctx.clearRect(0, 0, width, height);
    $('#spinner-generate').hide();

    ctx.drawImage(imageObj, 0, 0, width, height);

    ctx.font = "54px Times Roman";
    ctx.fillStyle = "#000000";
    ctx.fillText = (name_input, 35, 320);

    ctx.font = "21px Times Roman";
    ctx.fillStyle = "#000000";
    ctx.fillText = (note_input, 61, 432);
    ctx.fillText = (date_input, 254, 501);
    ctx.fillText = (sur_input, 254, 528);


    ctx.restore();
        }
imageObj.src = "IMAGEPATH";


} else {
    setTimeout(draw, 100);
}
}

But, in this case, the "imageObj.onload" function gets skipped by the code, that automatically jumps to "else".

I'm really confused at this point, since every source I consulted says that it is "simple" and uses the imageObj.onload example, but with the "window.onload" combination.

Is there something I'm missing regarding the Canvas' "Order of things"?

I appreciate and thank in advance for any response or input.

Answer 1

You're using fillText as a property while it should have been used as a method - simply change the lines to this format:

 ctx.fillText(name_input, 35, 320);

I did not check the rest of the code.