Unable to call canvas update event with Javascript in QWebChannel

Question

The code below sends data from Qt C++ to JavaScript via QWebChannel to draw on 'canvas'. The data is passed with the correct value, but the canvas redraw event does not occur.

If I call the 'drawCanvas' function within the same JavaScript file, I can perform all actions. However, when calling the JavaScript function in C++, the canvas does not redraw.

// js
function drawCanvas(imageData){        
    console.error("data "+value);
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.fillStyle = "yellow";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.font="48px serif";
    context.fillStyle = "black";
    context.fillText("Text "+imageData, 10, 50);

    if(imageData.length > 0 ){
        console.error("Image Data Length: " + (imageData ? imageData.length : "Undefined"));
    }

}

var i = 0;
window.addEventListener('resize', function(){        
    drawCanvas(++i);
});

It is explained with pictures as follows:

When you call the drawCanvas function in background.cpp, the following code is executed, this has been confirmed to be the correct value:

function drawCanvas(imageData){        
    console.error("data "+value);  << result: data 12323423  // correct value

I called the drawCanvas function with success in background.cpp, but why doesn't fillText() run?

This is what I tried:

// header
class CBackground
{
private:
    _BACKGROUNDHEADER_ m_bkgndHeader;

    static QWebEngineView* s_webView;
    static QWebChannel* m_webChannel;

    QString htmlPath = QFileInfo(__FILE__).dir().absolutePath() + "/canvas.html";

    ...
public: 
    onDraw();
    ....
}

// .cpp

bool CBackground::onDraw()
{
   if(!m_pBkgndImage->isNull()){

        if (m_pBkgndImage->colorSpace().isValid()){
            m_pBkgndImage->convertToColorSpace(QColorSpace::SRgb);
        }

        QPoint point(0,0);
        point.rx() = m_bkgndHeader.Left;
        point.ry() = m_bkgndHeader.Top;

        QVariant imageVariant = QVariant::fromValue(*m_pBkgndImage);

        imageObject = new QObject();
        imageObject->setProperty("imageData", imageVariant);

        m_webChannel->registerObject("imageObject", imageObject);

        int imageSizeInBytes = m_pBkgndImage->bytesPerLine() * m_pBkgndImage->height();

        QByteArray imageDataArray(reinterpret_cast<const char*>(m_pBkgndImage->bits()), imageSizeInBytes);

        **QString jsCode = QString("drawCanvas('%1');").arg(imageDataArray.size());
        // s_webView is static variable 
        s_webView->page()->runJavaScript(jsCode);**

        if(!m_pBkgndImage->isNull()){
            delete m_pBkgndImage;
            m_pBkgndImage = nullptr;
        }
      
        m_webChannel->deregisterObject(imageObject);
        imageObject->deleteLater();

        return true;

    } else {
        QMessageBox::information(nullptr, "Drawing Image", "Failed 412");
        return false;
    }

    return false;
}

 // canvas.html
  function drawCanvas(imageData){        
        console.error("data "+value);
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        context.fillStyle = "yellow";
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.font="48px serif";
        context.fillStyle = "black";
        context.fillText("Text "+imageData, 10, 50);

        if(imageData.length > 0 ){
            console.error("Image Data Length: " + (imageData ? imageData.length : "Undefined"));
        }

    }
    
    window.addEventListener('resize', drawCanvas);

How can I solve this?