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!

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.