Delay function in qml

I have created a sine wave. I added timer in the code and i try to call the delay but i am not able to get it. I try to call near ctx.lineto but no use. i need to add a delay between 1 plotting to another plotting. Pls help me to solve this issue

import QtQuick 2.9
import QtQuick.Window 2.15

Window {

    function timer() {
        return Qt.createQmlObject("import QtQuick 2.0; Timer {}", root);
    }

    id: screen
    visible: true
    height: 1080
    width: 1920
    title: qsTr("SineWave")

    Rectangle {
        height: parent.height
        width: parent.width
        Timer {
            id: timer
        }

        function delay(delayTime, cb) {
            timer.interval = delayTime;
            timer.repeat = false;
            timer.triggered.connect(cb);
            timer.start();
        }
        Canvas {
            id: canvas
            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d");
                var cw = parent.width;
                var ch = parent.height;
                var  cx = cw, cy = ch/2;
                var w = width;
                var h = height;
                ctx.lineWidth = 4;
                ctx.clearRect(0, 0, cw, ch);
                ctx.beginPath();
                ctx.moveTo(0, cy);

                for(var x=0;x<1921;x++){
                    var y = Math.sin(x/305);
                    ctx.lineTo(x, cy+(y*400));//now you add delay of 1sec
                    console.log(y)
                }//from here the sine wave is plotted from left to right clean the screen with small from left to right


                ctx.stroke();
                showMaximized(Window)
            }
        }
    }
}

This uses a Timer to increment a property called step. In the sine wave drawing step is used to limit the for loop to only draw lines until step.

import QtQuick
import QtQuick.Window

Window {
    id: screen
    visible: true
    height: 1080
    width: 1920
    title: qsTr("SineWave")

    Rectangle {
        height: parent.height
        width: parent.width

        Timer {
            id: timer
            interval: 50
            running: true
            repeat: true
            onTriggered: {
                if (canvas.step > 1921)
                    timer.stop()
                canvas.step++
                canvas.requestPaint()
            }
        }

        Canvas {
            id: canvas

            property int step: 0

            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d")
                var cw = parent.width
                var ch = parent.height
                var cx = cw
                var cy = ch/2
                var w = width
                var h = height
                ctx.lineWidth = 4
                ctx.clearRect(0, 0, cw, ch)
                ctx.beginPath()
                ctx.moveTo(0, cy)

                for (var x = 0; x < canvas.step; x++) {
                    ctx.lineTo(x, cy + (Math.sin(x / 305) * 400))
                }

                ctx.stroke()
            }
        }
    }
}