Important: Please read the Qt Code of Conduct -

transform doesn't apply to Canvas

  • I have a QML page like this:

    property real ratio: imgBackground.paintedWidth / 1920.0
    property real xBase: (root.width - imgBackground.paintedWidth) / 2.0
    property real yBase: (root.height - imgBackground.paintedHeight) / 2.0
    Image {
        id: imgBackground
        source: "blablabla"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
    Item {
        x: 0; y: 0
        width: 1920
        height: 1080
        transform: [
            Scale { xScale: ratio; yScale: ratio},
            Translate { x: xBase; y: yBase }
        MyObj {
            x: 100; y: 50
            width: 200; height: 200

    and MyObj is something like this:

    Canvas {
        id: canvas
        onPaint: {
            var ctx = canvas.getContext('2d')
            // draw some stuff

    Any other item placed in the page is scaled according to the transform object. But the Canvas is not affected.
    Instead, I want also the Canvas object to be scaled and translated. How to achieve that?

  • Moderators

    i didnt try, but what happens when you apply the same transform on the Canvas element too?

  • @raven-worx just tried but it seems it doesn't nothing at all.

Log in to reply