Important: Please read the Qt Code of Conduct -

JS loop disables canvas drawing

  • Hello Qt devs,

    I am facing a very strange issue with the QtQuick Canvas item.
    I am drawing two simple rectangles in a Canvas, but if I put some JS code with a for loop in between the drawing of those rectangle, only the first one is visible.
    Here is my code :

    import QtQuick 2.5
    Item {
            property int parallels:7; //number of lines for parallels
                var ctx = canvas.getContext("2d");
            function createTrackball(ctx)
                var parallelsLines;
                var mediansLines;
                for( i=1;i<parallels;i++)
                m_bCreated = true;

    So as you can see, nothing complicated. But as soon as I uncomment my for loop, the magenta rectangle is not displayed anymore.

    Also, I have noticed that I need to put the Item I am building here in another Item to have the canvas drawn in the Qt Creator Designer. So the code I wrote above is in a file called CameraControlTrackball.qml, and I have created another file called CameraControlTrackballHolder.qml which content is juste the following :

    import QtQuick 2.0
    Item {
        CameraControlTrackball {
            id: cameraControlTrackball1
            x: 64
            y: 64

    So to summerize a little bit, my questions are :
    -why does the for loop disable the display of the magenta rectangle?
    -why does the canvas from CameraControlTrackball.qml cannot be displayed straight from itself in the Designer?

    Thanks for your help!

  • Moderators

    Hi @bguivarch and Welcome,

    I just tried your example and it works. Just a couple of errors in the code that you posted.

    • variable i in the for loop was not declared.
    • m_bCreated was not declared.

    Perhaps you have declared them elsewhere ?

    Is it that thefor loop needs to contain some code to re-create the said problem ?

  • Hello @p3c0 and thanks for your answer.

    Yes the m_bCreated was declared, just a copy/paste issue when creating this post as I didn't paste my full code, just a snippet.
    The issue was in the i variable as you pointed it. I am not very familiar with JS, my bad. Declaring it before the loop solved my problem.

    Thanks for your help!