JS loop disables canvas drawing

[bguivarch]

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!

[p3c0]

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 ?

[bguivarch]

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!