I am new to JS. I have a ML model which does image segmentation. I provide the model with one image, to which it predicts output. I get the correct output array, I've verified.

But when I try to draw this output to a canvas using tf.browser.toPixel I always get the old Image.

Meaning, If I provide input as:

Input : img1 -> img2 -> img3...

output: <random shape> -> img1_prediction -> img2_prediction...

Where the random shape is this always, no matter what the input is. I've checked, this is not the output of my model.

Here's the code for this:

async function detect_custom(imgTag, canvas) {

    let tensor = tf.browser.fromPixels(imgTag).toFloat(); //imgTag is img element in html (input image)
    tensor = tensor.expandDims(0);
    const res = model.predict(tensor).squeeze(); 
    tf.dispose(tensor);
    // Everything is working correctly up to this point.

    await tf.browser.toPixels(res, canvas); // Problematic (I think)
}

I found the await tf.browser.toPixels(res, canvas) from this answer. Can anyone help what am i doing wrong?