Canvas weird repainting on ApplicationWindow{} changes width/height

shokarta

Hello All,

in the app i use lots of canvases, ie:

    Canvas {
                id: wideCanvasTop
                anchors.fill: parent

                onPaint: {
                    var context = getContext("2d");

                    // Shape
                    context.moveTo(mainWindow.width / 100, parent.height / 2);
                    context.lineTo(mainWindow.width / 25, parent.height / 20);
                    context.lineTo(mainWindow.width - (mainWindow.width / 25), parent.height / 20);
                    context.lineTo(mainWindow.width - (mainWindow.width / 100), parent.height / 2);
                    context.lineTo(mainWindow.width - (mainWindow.width / 25), parent.height - (parent.height / 20));
                    context.lineTo(mainWindow.width / 25, parent.height - (parent.height / 20));
                    context.lineTo(mainWindow.width / 100, parent.height / 2);

                    // Line
                    context.lineWidth = parent.height / 20;
                    context.strokeStyle = colors['unchoseStroke'];
                    context.stroke();

                    // Color
                    var grad = context.createLinearGradient(0, mainWindow.height/2, mainWindow.width, mainWindow.height/2);
                    grad.addColorStop(0, '#303030');
                    grad.addColorStop(0.35, '#151515');
                    grad.addColorStop(0.65, '#151515');
                    grad.addColorStop(1, '#303030');
                    context.fillStyle = grad;
                    context.fill();
                }
            }

and on every occasion i call (even tried on timer ie: 500ms):

wideCanvasTop.requestPaint();

but in reality, this just looks like this:
https://www.transfernow.net/dl/20220825neQ6KLlm (10mb avi video)

shokarta

so solution is not to repaint via requestPaint(), but actualy by reseting:

        onWidthChanged: {
            var context = getContext("2d");
            context.reset();
        }