Koch Curve in QML

/**
 * Koch Curve
 * F -> F + F - F - F + F
 * F means draw a straight line, + means turn left Pi/2 and - means turn
 * right Pi/2.
 * See wikipedia for more.
 *
 * by NilsB
 */

import QtQuick 2.3

Rectangle {

    width: 800
    height: 600

    Canvas {
        id: canvas
        width: parent.width
        height: parent.height
        antialiasing: true

        property int l: 3
        property int xPos: 20;
        property int yPos: parent.height - 20;

        function turnLeft(ctx) {
            ctx.rotate(-Math.PI/2);
        }

        function turnRight(ctx) {
            ctx.rotate(Math.PI/2);
        }

        function drawLine(ctx) {
            ctx.lineTo(l, 0);
            ctx.translate(l, 0);
        }

        function drawBasicShape(ctx) {

            drawLine(ctx);
            turnLeft(ctx);

            drawLine(ctx);
            turnRight(ctx);

            drawLine(ctx);
            turnRight(ctx);

            drawLine(ctx);
            turnLeft(ctx);

            drawLine(ctx);
        }

        function rKoch(ctx, n) {

            if (n === 1) {
                drawBasicShape(ctx);
                return;
            }

            var m = n - 1;

            rKoch(ctx, m);
            turnLeft(ctx);

            rKoch(ctx, m);
            turnRight(ctx);

            rKoch(ctx, m);
            turnRight(ctx);

            rKoch(ctx, m);
            turnLeft(ctx);

            rKoch(ctx, m);
        }

        function kochCurve(ctx, nIterations) {
            ctx.lineWidth = 2;
            ctx.strokeStyle = "red";
            ctx.beginPath();
            ctx.translate(xPos, yPos);
            ctx.moveTo(0, 0);
            rKoch(ctx, nIterations);
            ctx.stroke();
        }

        onPaint: {
            var ctx = canvas.getContext('2d');
            kochCurve(ctx, 5);
        }
    }
}