Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/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 {
        width:128;
        height:128;
    
        Canvas
        {
            property int parallels:7; //number of lines for parallels
            
            id:canvas
            width:parent.width;
            height:parent.height;
            onPaint:
            {
                var ctx = canvas.getContext("2d");
                ctx.fillStyle="cyan";
                ctx.fillRect(10,10,50,25);
                if(!m_bCreated)
                {
                    canvas.createTrackball(ctx);
                }
                ctx.fillStyle="magenta";
                ctx.fillRect(10,40,50,25);
            }
    
            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 {
        width:256;
        height:256;
    
        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!