[Interest] QML Canvas: bug or programmer error?

[Mark Summerfield]

Hi,

I'm having a problem with QML Canvas (Qt 5.0.0 and Qt 5.0.1).

Below are two tiny programs:

// canvas1.qml
import QtQuick 2.0
Grid {
    columns: 2
    spacing: 1
    Square { color: "red"; width: 100; height: 100; }
    Square { color: "green"; width: 100; height: 100; }
    Square { color: "blue"; width: 100; height: 100; }
    Square { color: "yellow"; width: 100; height: 100; }
}

// Square.qml
import QtQuick 2.0
Rectangle {
    id: square
    antialiasing: true
}

If this is run with qmlscene it correctly displays 4 colored squares.

// canvas2.qml
import QtQuick 2.0
Grid {
    columns: 2
    spacing: 1
    Triangle { color: "red"; width: 100; height: 100; }
    Triangle { color: "green"; width: 100; height: 100; }
    Triangle { color: "blue"; width: 100; height: 100; }
    Triangle { color: "yellow"; width: 100; height: 100; }
}

// Triangle.qml
import QtQuick 2.0
Canvas {
    id: triangle
    antialiasing: true
    property color color: "white"
    onPaint: {
        var ctx = getContext("2d");
        ctx.save();
        ctx.fillStyle = color;
        ctx.moveTo((x + width) / 2, 0);
        ctx.lineTo(width, y);
        ctx.lineTo(0, y);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
}

If this is run with qmlscene it displays a blue triangle bottom left and
a yellow triangle bottom right. It does not display red or green
triangles even if you enlarge the window, and the yellow triangle is
drawn incorrectly.

I am unfamiliar with the JavaScript Canvas, so perhaps I am making a
mistake?

Thanks!

-- 
Mark Summerfield, Qtrac Ltd, www.qtrac.eu
    C++, Python, Qt, PyQt - training and consultancy
        "Programming in Python 3" - ISBN 0321680561
            http://www.qtrac.eu/py3book.html