Canvas example: Improve usage of best practices

This commit updates the example in order to adopt as many best
practices and follow our coding conventions from our official
documentation.

- qmllint will report no erros with this patch (As long as the shared
  module is imported).
- strings are translated.
- JS statements no longer end with semi-colon.
- Removed unused properties and marked those that are only read as
readonly

Pick-to: 6.5 6.5.0
Change-Id: Ibe0d0750d48018b618a5cf8c3bcecb7e29488274
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>

9 files changed, 658 insertions, 431 deletions

diff --git a/examples/quick/canvas/LabeledSlider.qml b/examples/quick/canvas/LabeledSlider.qml
index 5cab697b18..fa0ab98f78 100644
--- a/examples/quick/canvas/LabeledSlider.qml
+++ b/examples/quick/canvas/LabeledSlider.qml
@@ -7,32 +7,31 @@ import QtQuick.Controls
 Item {
     id: labeledSlider
     property alias name: label.text
-    implicitHeight: Math.max(label.implicitHeight, quickControlsSlider.implicitHeight)
     property real min: 0.0
     property real max: 1.0
-    property real init: 0.0
-    readonly property alias value: quickControlsSlider.value
+    property alias value: quickControlsSlider.value
+
+    implicitHeight: Math.max(label.implicitHeight, quickControlsSlider.implicitHeight)
 
     Label {
         id: label
         anchors.left: parent.left
         anchors.leftMargin: 10
-        anchors.verticalCenter: parent.verticalCenter
-        color: "#333"
+        anchors.verticalCenter: labeledSlider.verticalCenter
         font: Qt.font({pointSize: 13})
     }
 
     Slider {
         id: quickControlsSlider
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: parent.right
-        anchors.rightMargin: 10
-        anchors.left: label.right
-        anchors.leftMargin: 20
+        anchors {
+            verticalCenter: labeledSlider.verticalCenter
+            right: labeledSlider.right
+            rightMargin: 10
+            left: label.right
+            leftMargin: 10
+        }
         from: labeledSlider.min
         to: labeledSlider.max
         width: labeledSlider.width - label.implicitWidth - (label.anchors.leftMargin + anchors.rightMargin + anchors.leftMargin)
-
-        Component.onCompleted: ()=> value = labeledSlider.init;
     }
 }
diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml
index 31ec4e60ef..0965a1e3db 100644
--- a/examples/quick/canvas/bezierCurve/bezierCurve.qml
+++ b/examples/quick/canvas/bezierCurve/bezierCurve.qml
@@ -6,94 +6,129 @@ import QtQuick.Controls
 import "../"
 
 Item {
-    id:container
+    id: root
     width: 320
     height: 480
 
     Column {
-        spacing:5
-        anchors.fill: parent
-        anchors.topMargin: 12
+        spacing: 5
+        anchors {
+            fill: parent
+            topMargin: 12
+        }
 
         Label {
-            font.pointSize: 24
-            font.bold: true
-            text: "Bezier Curve"
             anchors.horizontalCenter: parent.horizontalCenter
-            color: "#777"
+            text: qsTr("Bezier Curve")
+            color: Qt.lighter(palette.text)
+            font {
+                pointSize: 24
+                bold: true
+            }
         }
 
         Canvas {
-            id:canvas
-            width:320
-            height:280
-            property color strokeStyle:  Qt.darker(fillStyle, 1.4)
-            property color fillStyle: "#b40000" // red
-            property int lineWidth: lineWidthCtrl.value
-            property bool fill: true
-            property bool stroke: true
-            property real alpha: 1.0
-            property real scale : scaleCtrl.value
-            property real rotate : rotateCtrl.value
+            id: canvas
+
+            readonly property color strokeStyle:  Qt.darker(fillStyle, 1.4)
+            readonly property color fillStyle: "#b40000" // red
+            readonly property alias lineWidth: lineWidthCtrl.value
+            readonly property alias fill: toggleFillCheckBox.checked
+            readonly property alias stroke: toggleStrokeCheckBox.checked
+            readonly property real alpha: 1.0
+            readonly property alias scale: scaleCtrl.value
+            readonly property alias rotate: rotateCtrl.value
+
+            width: root.width
+            height: parent.height - controls.height
             antialiasing: true
 
-            onLineWidthChanged:requestPaint();
-            onFillChanged:requestPaint();
-            onStrokeChanged:requestPaint();
-            onScaleChanged:requestPaint();
-            onRotateChanged:requestPaint();
+            onLineWidthChanged: requestPaint()
+            onFillChanged: requestPaint()
+            onStrokeChanged: requestPaint()
+            onScaleChanged: requestPaint()
+            onRotateChanged: requestPaint()
 
-            onPaint: {
-                var ctx = canvas.getContext('2d');
-                var originX = 85
-                var originY = 75
-                ctx.save();
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                ctx.translate(originX, originX);
-                ctx.globalAlpha = canvas.alpha;
-                ctx.strokeStyle = canvas.strokeStyle;
-                ctx.fillStyle = canvas.fillStyle;
-                ctx.lineWidth = canvas.lineWidth;
+            onPaint: function() {
+                let ctx = canvas.getContext('2d')
+                const originX = 85
+                const originY = 75
+                ctx.save()
+                ctx.clearRect(0, 0, canvas.width, canvas.height)
+                ctx.translate(originX, originX)
+                ctx.globalAlpha = canvas.alpha
+                ctx.strokeStyle = canvas.strokeStyle
+                ctx.fillStyle = canvas.fillStyle
+                ctx.lineWidth = canvas.lineWidth
 
                 ctx.translate(originX, originY)
-                ctx.scale(canvas.scale, canvas.scale);
-                ctx.rotate(canvas.rotate);
+                ctx.scale(canvas.scale, canvas.scale)
+                ctx.rotate(canvas.rotate)
                 ctx.translate(-originX, -originY)
 
                 //! [0]
-                ctx.beginPath();
-                ctx.moveTo(75,40);
-                ctx.bezierCurveTo(75,37,70,25,50,25);
-                ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
-                ctx.bezierCurveTo(20,80,40,102,75,120);
-                ctx.bezierCurveTo(110,102,130,80,130,62.5);
-                ctx.bezierCurveTo(130,62.5,130,25,100,25);
-                ctx.bezierCurveTo(85,25,75,37,75,40);
-                ctx.closePath();
+                ctx.beginPath()
+                ctx.moveTo(75,40)
+                ctx.bezierCurveTo(75,37,70,25,50,25)
+                ctx.bezierCurveTo(20,25,20,62.5,20,62.5)
+                ctx.bezierCurveTo(20,80,40,102,75,120)
+                ctx.bezierCurveTo(110,102,130,80,130,62.5)
+                ctx.bezierCurveTo(130,62.5,130,25,100,25)
+                ctx.bezierCurveTo(85,25,75,37,75,40)
+                ctx.closePath()
                 //! [0]
                 if (canvas.fill)
-                    ctx.fill();
+                    ctx.fill()
                 if (canvas.stroke)
-                    ctx.stroke();
-                ctx.restore();
+                    ctx.stroke()
+                ctx.restore()
             }
         }
     }
     Column {
         id: controls
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
+        anchors {
+            bottom: parent.bottom
+            bottomMargin: 12
+        }
 
         LabeledSlider {
-            id: lineWidthCtrl; name: "Outline"; min: 1; max: 10; init: 2; width: container.width
+            id: lineWidthCtrl
+            name: qsTr("Outline")
+            min: 1
+            max: 10
+            value: 2
+            width: root.width
         }
 
         LabeledSlider {
-            id: scaleCtrl; name: "Scale"; min: 0.1; max: 10; init: 1; width: container.width
+            id: scaleCtrl
+            name: qsTr("Scale")
+            min: 0.1
+            max: 10
+            value: 1
+            width: root.width
         }
 
         LabeledSlider {
-            id: rotateCtrl; name: "Rotate"; min: 0; max: Math.PI*2; init: 0; width: container.width
+            id: rotateCtrl
+            name: qsTr("Rotate")
+            min: 0
+            max: Math.PI * 2
+            value: 0
+            width: root.width
+        }
+        Row {
+            CheckBox {
+                id: toggleFillCheckBox
+                checked: true
+                text: qsTr("Toggle fill")
+            }
+            CheckBox {
+                id: toggleStrokeCheckBox
+                checked: true
+                text: qsTr("Toggle stroke")
+            }
         }
     }
 }
diff --git a/examples/quick/canvas/canvas.qml b/examples/quick/canvas/canvas.qml
index 114941bbdc..6ac856eb6d 100644
--- a/examples/quick/canvas/canvas.qml
+++ b/examples/quick/canvas/canvas.qml
@@ -5,19 +5,26 @@ import QtQuick
 import shared as Examples
 
 Item {
+    id: root
     height: 480
     width: 320
     Examples.LauncherList {
-        id: ll
-        anchors.fill: parent
+        anchors.fill: root
         Component.onCompleted: {
-            addExample("Red heart", "Draws a red heart with bezier curves",  Qt.resolvedUrl("bezierCurve/bezierCurve.qml"));
-            addExample("Talk bubble", "Draws a talk bubble with quadratic curves",  Qt.resolvedUrl("quadraticCurveTo/quadraticCurveTo.qml"));
-            addExample("Squircle", "Draws a smooth squircle with simple lines",  Qt.resolvedUrl("squircle/squircle.qml"));
-            addExample("Rounded rectangle", "Draws a rounded rectangle with lines and arcs",  Qt.resolvedUrl("roundedrect/roundedrect.qml"));
-            addExample("Smile face", "Draws a smile face with complex paths",  Qt.resolvedUrl("smile/smile.qml"));
-            addExample("Clip", "Shows the canvas clip feature",  Qt.resolvedUrl("clip/clip.qml"));
-            addExample("Tiger", "Draw a tiger with a collection of SVG paths",  Qt.resolvedUrl("tiger/tiger.qml"));
+            addExample(qsTr("Red heart"), qsTr("Draws a red heart with bezier curves"),
+                Qt.resolvedUrl("bezierCurve/bezierCurve.qml"))
+            addExample(qsTr("Talk bubble"), qsTr("Draws a talk bubble with quadratic curves"),
+                Qt.resolvedUrl("quadraticCurveTo/quadraticCurveTo.qml"))
+            addExample(qsTr("Squircle"), qsTr("Draws a smooth squircle with simple lines"),
+                Qt.resolvedUrl("squircle/squircle.qml"))
+            addExample(qsTr("Rounded rectangle"), qsTr("Draws a rounded rectangle with lines and arcs"),
+                Qt.resolvedUrl("roundedrect/roundedrect.qml"))
+            addExample(qsTr("Smile face"), qsTr("Draws a smile face with complex paths"),
+                Qt.resolvedUrl("smile/smile.qml"))
+            addExample(qsTr("Clip"), qsTr("Shows the canvas clip feature"),
+                Qt.resolvedUrl("clip/clip.qml"))
+            addExample(qsTr("Tiger"), qsTr("Draw a tiger with a collection of SVG paths"),
+                Qt.resolvedUrl("tiger/tiger.qml"))
         }
     }
 }
diff --git a/examples/quick/canvas/clip/clip.qml b/examples/quick/canvas/clip/clip.qml
index c39da7d108..3d0591f97a 100644
--- a/examples/quick/canvas/clip/clip.qml
+++ b/examples/quick/canvas/clip/clip.qml
@@ -6,108 +6,137 @@ import QtQuick.Controls
 import "../"
 
 Item {
-    id:container
+    id: root
     width: 320
     height: 480
 
     Column {
-        spacing:5
-        anchors.fill: parent
-        anchors.topMargin: 12
+        spacing: 5
+        anchors {
+            fill: root
+            topMargin: 12
+        }
 
         Label {
-            font.pointSize: 24
-            font.bold: true
-            text: "Squircle with Clip"
             anchors.horizontalCenter: parent.horizontalCenter
-            color: "#777"
+            text: qsTr("Squircle with Clip")
+            color: Qt.lighter(palette.text)
+            font {
+                pointSize: 24
+                bold: true
+            }
         }
         Canvas {
             id: canvas
-            width: 320
-            height: 280
-            property color strokeStyle: Qt.darker(fillStyle, 1.2)
-            property color fillStyle:"#14aaff" // green
-            property int lineWidth:2
-            property int nSize:nCtrl.value
-            property real radius:rCtrl.value
-            property bool fill:true
-            property bool stroke:false
-            property real px: width/2
-            property real py: height/2 + 20
-            property real alpha: 1.0
-            property string imagefile:"../contents/qt-logo.png"
+
+            readonly property color strokeStyle: Qt.darker(fillStyle, 1.2)
+            readonly property color fillStyle: "#14aaff" // green
+            readonly property int lineWidth: 2
+            readonly property alias nSize: nCtrl.value
+            readonly property alias radius: rCtrl.value
+            readonly property alias fill: toggleFillCheckBox.checked
+            readonly property alias stroke: toggleStrokeCheckBox.checked
+            readonly property real px: width / 2
+            readonly property real py: height / 2 + 20
+            readonly property real alpha: 1.0
+            readonly property string imagefile: "../contents/qt-logo.png"
+
+            width: root.width
+            height: parent.height - controls.height
             antialiasing: true
-            Component.onCompleted:loadImage(canvas.imagefile);
-
-            onRadiusChanged:requestPaint();
-            onLineWidthChanged:requestPaint();
-            onNSizeChanged:requestPaint();
-            onFillChanged:requestPaint();
-            onStrokeChanged:requestPaint();
-            onImageLoaded : requestPaint();
-            onPaint: squcirle();
-
-            function squcirle() {
-                var ctx = canvas.getContext("2d");
-                var N = canvas.nSize;
-                var R = canvas.radius;
-
-                N=Math.abs(N);
-                var M=N;
-                if (N>100) M=100;
-                if (N<0.00000000001) M=0.00000000001;
-
-                ctx.save();
-                ctx.globalAlpha = canvas.alpha;
-                ctx.fillStyle = "white";
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-                ctx.strokeStyle = canvas.strokeStyle;
-                ctx.fillStyle = canvas.fillStyle;
-                ctx.lineWidth = canvas.lineWidth;
-
-                ctx.beginPath();
-                var i = 0, x, y;
-                for (i=0; i<(2*R+1); i++){
-                    x = Math.round(i-R) + canvas.px;
-                    y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py;
-
-                    if (i == 0)
-                        ctx.moveTo(x, y);
+
+            Component.onCompleted: loadImage(canvas.imagefile)
+            onRadiusChanged: requestPaint()
+            onLineWidthChanged: requestPaint()
+            onNSizeChanged: requestPaint()
+            onFillChanged: requestPaint()
+            onStrokeChanged: requestPaint()
+            onImageLoaded: requestPaint()
+
+            onPaint: function() {
+                let ctx = canvas.getContext("2d")
+                const N = Math.abs(canvas.nSize)
+                const R = canvas.radius
+
+                const M = Math.max(0.00000000001, Math.min(N, 100))
+
+                ctx.save()
+                ctx.globalAlpha = canvas.alpha
+                ctx.fillStyle = "white"
+                ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+                ctx.strokeStyle = canvas.strokeStyle
+                ctx.fillStyle = canvas.fillStyle
+                ctx.lineWidth = canvas.lineWidth
+
+                ctx.beginPath()
+                let i, x, y
+                for (i = 0; i < (2 * R + 1); i++) {
+                    x = Math.round(i - R) + canvas.px
+                    y = Math.round(Math.pow(Math.abs(Math.pow(R, M) - Math.pow(Math.abs(i - R), M)), 1 / M)) + canvas.py
+
+                    if (i === 0)
+                        ctx.moveTo(x, y)
                     else
-                        ctx.lineTo(x, y);
+                        ctx.lineTo(x, y)
                 }
 
-                for (i=(2*R); i<(4*R+1); i++){
-                    x =Math.round(3*R-i)+canvas.px;
-                    y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py;
-                    ctx.lineTo(x, y);
+                for (i = (2 * R); i < (4 * R + 1); i++) {
+                    x = Math.round(3 * R - i) + canvas.px
+                    y = Math.round(-Math.pow(Math.abs(Math.pow(R, M) - Math.pow(Math.abs(3 * R - i), M)), 1 / M)) + canvas.py
+                    ctx.lineTo(x, y)
                 }
-                ctx.closePath();
+                ctx.closePath()
                 if (canvas.stroke) {
-                    ctx.stroke();
+                    ctx.stroke()
                 }
 
                 if (canvas.fill) {
-                    ctx.fill();
+                    ctx.fill()
                 }
 
                 //! [0]
-                ctx.clip();
-                ctx.drawImage(canvas.imagefile, 0, 0);
+                ctx.clip()
+                ctx.drawImage(canvas.imagefile, 0, 0)
                 //! [0]
 
-                ctx.restore();
+                ctx.restore()
             }
         }
     }
     Column {
         id: controls
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
+        anchors {
+            bottom: parent.bottom
+            bottomMargin: 12
+        }
 
-        LabeledSlider {id: nCtrl; min: 1; max: 10; init: 4; name: "N"; width: container.width}
-        LabeledSlider {id: rCtrl; min: 30; max: 180; init: 80; name: "Radius"; width: container.width}
+        LabeledSlider {
+            id: nCtrl
+            name: qsTr("N")
+            width: root.width
+            min: 1
+            max: 10
+            value: 4
+        }
+        LabeledSlider {
+            id: rCtrl
+            name: qsTr("Radius")
+            width: root.width
+            min: 30
+            max: 180
+            value: 80
+        }
+        Row {
+            CheckBox {
+                id: toggleFillCheckBox
+                checked: true
+                text: qsTr("Toggle fill")
+            }
+            CheckBox {
+                id: toggleStrokeCheckBox
+                text: qsTr("Toggle stroke")
+            }
+        }
     }
 }
diff --git a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
index 032319036b..0f788891ab 100644
--- a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
+++ b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
@@ -6,94 +6,133 @@ import QtQuick.Controls
 import "../"
 
 Item {
-    id:container
-    width:320
-    height:480
+    id: root
+    width: 320
+    height: 480
 
     Column {
-        spacing:5
-        anchors.fill: parent
-        anchors.topMargin: 12
+        spacing: 5
+        anchors {
+            fill: parent
+            topMargin: 12
+        }
 
         Label {
-            font.pointSize: 24
-            font.bold: true
-            text: "Quadratic Curve"
             anchors.horizontalCenter: parent.horizontalCenter
-            color: "#777"
+            text: qsTr("Quadratic Curve")
+            color: Qt.lighter(palette.text)
+            font {
+                pointSize: 24
+                bold: true
+            }
         }
 
         Canvas {
             id: canvas
-            width: 320
-            height: 280
 
-            property color strokeStyle:  Qt.darker(fillStyle, 1.3)
-            property color fillStyle: "#14aaff" // blue
-            property int lineWidth: lineWidthCtrl.value
-            property bool fill: true
-            property bool stroke: true
-            property real alpha: 1.0
-            property real scale : scaleCtrl.value
-            property real rotate : rotateCtrl.value
+            readonly property color strokeStyle: Qt.darker(fillStyle, 1.3)
+            readonly property color fillStyle: "#14aaff" // blue
+            readonly property alias lineWidth: lineWidthCtrl.value
+            readonly property alias fill: toggleFillCheckBox.checked
+            readonly property alias stroke: toggleStrokeCheckBox.checked
+            readonly property alias scale: scaleCtrl.value
+            readonly property alias rotate: rotateCtrl.value
 
+            width: root.width
+            height: parent.height - controls.height
             antialiasing: true
 
-            onLineWidthChanged:requestPaint();
-            onFillChanged:requestPaint();
-            onStrokeChanged:requestPaint();
-            onScaleChanged:requestPaint();
-            onRotateChanged:requestPaint();
+            onLineWidthChanged: requestPaint()
+            onFillChanged: requestPaint()
+            onStrokeChanged: requestPaint()
+            onScaleChanged: requestPaint()
+            onRotateChanged: requestPaint()
 
-            onPaint: {
-                var ctx = canvas.getContext('2d');
-                var originX = 75
-                var originY = 75
+            onPaint: function() {
+                let ctx = canvas.getContext('2d')
+                const originX = 75
+                const originY = 75
 
-                ctx.save();
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                ctx.translate(originX, originX);
-                ctx.strokeStyle = canvas.strokeStyle;
-                ctx.fillStyle = canvas.fillStyle;
-                ctx.lineWidth = canvas.lineWidth;
+                ctx.save()
+                ctx.clearRect(0, 0, canvas.width, canvas.height)
+                ctx.translate(originX, originX)
+                ctx.strokeStyle = canvas.strokeStyle
+                ctx.fillStyle = canvas.fillStyle
+                ctx.lineWidth = canvas.lineWidth
 
                 ctx.translate(originX, originY)
-                ctx.rotate(canvas.rotate);
-                ctx.scale(canvas.scale, canvas.scale);
+                ctx.rotate(canvas.rotate)
+                ctx.scale(canvas.scale, canvas.scale)
                 ctx.translate(-originX, -originY)
 
                 // ![0]
-                ctx.beginPath();
-                ctx.moveTo(75,25);
-                ctx.quadraticCurveTo(25,25,25,62.5);
-                ctx.quadraticCurveTo(25,100,50,100);
-                ctx.quadraticCurveTo(50,120,30,125);
-                ctx.quadraticCurveTo(60,120,65,100);
-                ctx.quadraticCurveTo(125,100,125,62.5);
-                ctx.quadraticCurveTo(125,25,75,25);
-                ctx.closePath();
+                ctx.beginPath()
+                ctx.moveTo(75, 25)
+                ctx.quadraticCurveTo(25, 25, 25, 62.5)
+                ctx.quadraticCurveTo(25, 100, 50, 100)
+                ctx.quadraticCurveTo(50, 120, 30, 125)
+                ctx.quadraticCurveTo(60, 120, 65, 100)
+                ctx.quadraticCurveTo(125, 100, 125, 62.5)
+                ctx.quadraticCurveTo(125, 25, 75, 25)
+                ctx.closePath()
                 // ![0]
 
                 if (canvas.fill)
-                    ctx.fill();
+                    ctx.fill()
                 if (canvas.stroke)
-                    ctx.stroke();
+                    ctx.stroke()
 
                 // ![1]
-                ctx.fillStyle = "white";
-                ctx.font = "bold 17px sans-serif";
-                ctx.fillText("Qt Quick", 40, 70);
+                ctx.fillStyle = "white"
+                ctx.font = "bold 17px sans-serif"
+                ctx.fillText("Qt Quick", 40, 70)
                 // ![1]
-                ctx.restore();
+                ctx.restore()
             }
         }
     }
     Column {
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
+        id: controls
+        anchors {
+            bottom: parent.bottom
+            bottomMargin: 12
+        }
 
-        LabeledSlider {id:lineWidthCtrl; min:1; max:10; init:2; name: "Outline"; width: container.width}
-        LabeledSlider {id:scaleCtrl; min:0.1; max:10; init:1; name: "Scale"; width: container.width}
-        LabeledSlider {id:rotateCtrl; min:0; max:Math.PI*2; init:0; name: "Rotate"; width: container.width}
+        LabeledSlider {
+            id: lineWidthCtrl
+            name: qsTr("Outline")
+            width: root.width
+            min: 1
+            max: 10
+            value: 2
+        }
+        LabeledSlider {
+            id: scaleCtrl
+            name: qsTr("Scale")
+            width: root.width
+            min: 0.1
+            max: 10
+            value: 1
+        }
+        LabeledSlider {
+            id: rotateCtrl
+            name: qsTr("Rotate")
+            width: root.width
+            min: 0
+            max: Math.PI * 2
+            value: 0
+        }
+        Row {
+            CheckBox {
+                id: toggleFillCheckBox
+                checked: true
+                text: qsTr("Toggle fill")
+            }
+            CheckBox {
+                id: toggleStrokeCheckBox
+                checked: true
+                text: qsTr("Toggle stroke")
+            }
+        }
     }
 }
diff --git a/examples/quick/canvas/roundedrect/roundedrect.qml b/examples/quick/canvas/roundedrect/roundedrect.qml
index 6966528402..26861b921c 100644
--- a/examples/quick/canvas/roundedrect/roundedrect.qml
+++ b/examples/quick/canvas/roundedrect/roundedrect.qml
@@ -6,81 +6,115 @@ import QtQuick.Controls
 import "../"
 
 Item {
-    id:container
+    id: root
     width: 320
     height: 480
 
     Column {
         spacing: 6
-        anchors.fill: parent
-        anchors.topMargin: 12
+        anchors {
+            fill: parent
+            topMargin: 12
+        }
 
         Label {
-            font.pointSize: 24
-            font.bold: true
-            text: "Rounded rectangle"
             anchors.horizontalCenter: parent.horizontalCenter
-            color: "#777"
+            text: qsTr("Rounded rectangle")
+            color: Qt.lighter(palette.text)
+            font {
+                pointSize: 24
+                bold: true
+            }
         }
         Canvas {
             id: canvas
-            width: 320
-            height: 280
-            antialiasing: true
 
-            property int radius: rCtrl.value
-            property int rectx: 60
-            property int recty: 60
-            property int rectWidth: width - 2*rectx
-            property int rectHeight: height - 2*recty
-            property color strokeStyle:  Qt.darker(fillStyle, 1.4)
-            property color fillStyle: "#ae32a0" // purple
-            property int lineWidth: lineWidthCtrl.value
-            property bool fill: true
-            property bool stroke: true
-            property real alpha: 1.0
+            readonly property alias radius: rCtrl.value
+            readonly property int rectx: 60
+            readonly property int recty: 60
+            readonly property int rectWidth: width - 2 * rectx
+            readonly property int rectHeight: height - 2 * recty
+            readonly property color strokeStyle:  Qt.darker(fillStyle, 1.4)
+            readonly property color fillStyle: "#ae32a0" // purple
+            readonly property alias lineWidth: lineWidthCtrl.value
+            readonly property alias fill: toggleFillCheckBox.checked
+            readonly property alias stroke: toggleStrokeCheckBox.checked
+            readonly property real alpha: 1.0
 
-            onLineWidthChanged:requestPaint();
-            onFillChanged:requestPaint();
-            onStrokeChanged:requestPaint();
-            onRadiusChanged:requestPaint();
+            width: root.width
+            height: parent.height - controls.height
+            antialiasing: true
+
+            onLineWidthChanged: requestPaint()
+            onFillChanged: requestPaint()
+            onStrokeChanged: requestPaint()
+            onRadiusChanged: requestPaint()
 
-            onPaint: {
-                var ctx = getContext("2d");
-                ctx.save();
-                ctx.clearRect(0,0,canvas.width, canvas.height);
-                ctx.strokeStyle = canvas.strokeStyle;
+            onPaint: function() {
+                var ctx = getContext("2d")
+                ctx.save()
+                ctx.clearRect(0, 0, canvas.width, canvas.height)
+                ctx.strokeStyle = canvas.strokeStyle
                 ctx.lineWidth = canvas.lineWidth
                 ctx.fillStyle = canvas.fillStyle
                 ctx.globalAlpha = canvas.alpha
-                ctx.beginPath();
-                ctx.moveTo(rectx+radius,recty);                 // top side
-                ctx.lineTo(rectx+rectWidth-radius,recty);
+                ctx.beginPath()
+                ctx.moveTo(rectx + radius, recty)                 // top side
+                ctx.lineTo(rectx + rectWidth - radius, recty)
                 // draw top right corner
-                ctx.arcTo(rectx+rectWidth,recty,rectx+rectWidth,recty+radius,radius);
-                ctx.lineTo(rectx+rectWidth,recty+rectHeight-radius);    // right side
+                ctx.arcTo(rectx + rectWidth, recty, rectx + rectWidth, recty + radius, radius)
+                ctx.lineTo(rectx + rectWidth, recty + rectHeight - radius)    // right side
                 // draw bottom right corner
-                ctx.arcTo(rectx+rectWidth,recty+rectHeight,rectx+rectWidth-radius,recty+rectHeight,radius);
-                ctx.lineTo(rectx+radius,recty+rectHeight);              // bottom side
+                ctx.arcTo(rectx + rectWidth, recty + rectHeight, rectx + rectWidth - radius, recty + rectHeight, radius)
+                ctx.lineTo(rectx + radius, recty + rectHeight)              // bottom side
                 // draw bottom left corner
-                ctx.arcTo(rectx,recty+rectHeight,rectx,recty+rectHeight-radius,radius);
-                ctx.lineTo(rectx,recty+radius);                 // left side
+                ctx.arcTo(rectx, recty + rectHeight, rectx, recty + rectHeight - radius, radius)
+                ctx.lineTo(rectx, recty + radius)                 // left side
                 // draw top left corner
-                ctx.arcTo(rectx,recty,rectx+radius,recty,radius);
-                ctx.closePath();
+                ctx.arcTo(rectx, recty, rectx + radius, recty, radius)
+                ctx.closePath()
                 if (canvas.fill)
-                    ctx.fill();
+                    ctx.fill()
                 if (canvas.stroke)
-                    ctx.stroke();
-                ctx.restore();
+                    ctx.stroke()
+                ctx.restore()
             }
         }
     }
     Column {
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
+        id: controls
+        anchors {
+            bottom: parent.bottom
+            bottomMargin: 12
+        }
 
-        LabeledSlider {id: lineWidthCtrl ; min: 1 ; max: 10; init: 2 ; name: "Outline"; width: container.width}
-        LabeledSlider {id: rCtrl ; min: 10 ; max: 80 ; init: 40 ; name: "Radius"; width: container.width}
+        LabeledSlider {
+            id: lineWidthCtrl
+            name: qsTr("Outline")
+            width: root.width
+            min: 1
+            max: 10
+            value: 2
+        }
+        LabeledSlider {
+            id: rCtrl
+            name: qsTr("Radius")
+            width: root.width
+            min: 10
+            max: 80
+            value: 40
+        }
+        Row {
+            CheckBox {
+                id: toggleFillCheckBox
+                checked: true
+                text: qsTr("Toggle fill")
+            }
+            CheckBox {
+                id: toggleStrokeCheckBox
+                checked: true
+                text: qsTr("Toggle stroke")
+            }
+        }
     }
 }
diff --git a/examples/quick/canvas/smile/smile.qml b/examples/quick/canvas/smile/smile.qml
index 0d2034d9ca..bf534a3da2 100644
--- a/examples/quick/canvas/smile/smile.qml
+++ b/examples/quick/canvas/smile/smile.qml
@@ -6,87 +6,124 @@ import QtQuick.Controls
 import "../"
 
 Item {
-    id: container
+    id: root
     width: 320
     height: 480
 
     Column {
         spacing: 6
-        anchors.fill: parent
-        anchors.topMargin: 12
+        anchors {
+            fill: parent
+            topMargin: 12
+        }
 
         Label {
-            font.pointSize: 24
-            font.bold: true
-            text: "Smile with arcs"
             anchors.horizontalCenter: parent.horizontalCenter
-            color: "#777"
+            text: qsTr("Smile with arcs")
+            font {
+                pointSize: 24
+                bold: true
+            }
+            color: Qt.lighter(palette.text)
         }
 
         Canvas {
             id: canvas
-            width: 320
+
+            readonly property color strokeStyle:  Qt.darker(fillStyle, 1.6)
+            readonly property color fillStyle: "#e0c31e" // yellow
+            readonly property alias lineWidth: lineWidthCtrl.value
+            readonly property alias fill: toggleFillCheckBox.checked
+            readonly property alias stroke: toggleStrokeCheckBox.checked
+            readonly property alias scale: scaleCtrl.value
+            readonly property alias rotate: rotateCtrl.value
+
+            width: root.width
             height: parent.height - controls.height
             antialiasing: true
 
-            property color strokeStyle:  Qt.darker(fillStyle, 1.6)
-            property color fillStyle: "#e0c31e" // yellow
-            property int lineWidth: lineWidthCtrl.value
-            property bool fill: true
-            property bool stroke: true
-            property real scale : scaleCtrl.value
-            property real rotate : rotateCtrl.value
-
-            onLineWidthChanged:requestPaint();
-            onFillChanged:requestPaint();
-            onStrokeChanged:requestPaint();
-            onScaleChanged:requestPaint();
-            onRotateChanged:requestPaint();
+            onLineWidthChanged: requestPaint()
+            onFillChanged: requestPaint()
+            onStrokeChanged: requestPaint()
+            onScaleChanged: requestPaint()
+            onRotateChanged: requestPaint()
 
             onPaint: {
-                var ctx = canvas.getContext('2d');
-                var originX = 85
-                var originY = 75
-                ctx.save();
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                ctx.translate(originX, originX);
-                ctx.strokeStyle = canvas.strokeStyle;
-                ctx.fillStyle = canvas.fillStyle;
-                ctx.lineWidth = canvas.lineWidth;
+                let ctx = canvas.getContext('2d')
+                const originX = 85
+                const originY = 75
+                ctx.save()
+                ctx.clearRect(0, 0, canvas.width, canvas.height)
+                ctx.translate(originX, originX)
+                ctx.strokeStyle = canvas.strokeStyle
+                ctx.fillStyle = canvas.fillStyle
+                ctx.lineWidth = canvas.lineWidth
 
                 ctx.translate(originX, originY)
-                ctx.scale(canvas.scale, canvas.scale);
-                ctx.rotate(canvas.rotate);
+                ctx.scale(canvas.scale, canvas.scale)
+                ctx.rotate(canvas.rotate)
                 ctx.translate(-originX, -originY)
 
-                ctx.beginPath();
-                ctx.moveTo(75 + 50  * Math.cos(0),
-                           75 - 50  * Math.sin(Math.PI*2));
-                ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
-                ctx.moveTo(60,60);
-                ctx.arc(60,60,5,0,Math.PI*2,true);  // Left eye
-                ctx.moveTo(90 + 5  * Math.cos(0),
-                           65 - 5  * Math.sin(Math.PI*2));
-                ctx.moveTo(90,60);
-                ctx.arc(90,60,5,-Math.PI,Math.PI*3,false);  // Right eye
-                ctx.moveTo(75,70);
-                ctx.arc(75,70,35,0,Math.PI,false);   // Mouth (clockwise)
-                ctx.closePath();
+                ctx.beginPath()
+                ctx.moveTo(75 + 50 * Math.cos(0), 75 - 50 * Math.sin(Math.PI * 2))
+                ctx.arc(75, 75, 50, 0, Math.PI * 2, true) // Outer circle
+                ctx.moveTo(60, 60)
+                ctx.arc(60, 60, 5, 0, Math.PI * 2, true)  // Left eye
+                ctx.moveTo(90 + 5 * Math.cos(0), 65 - 5 * Math.sin(Math.PI * 2))
+                ctx.moveTo(90, 60)
+                ctx.arc(90, 60, 5, -Math.PI, Math.PI * 3, false)  // Right eye
+                ctx.moveTo(75, 70)
+                ctx.arc(75, 70, 35, 0, Math.PI, false)   // Mouth (clockwise)
+                ctx.closePath()
                 if (canvas.fill)
-                    ctx.fill();
+                    ctx.fill()
                 if (canvas.stroke)
-                    ctx.stroke();
-                ctx.restore();
+                    ctx.stroke()
+                ctx.restore()
             }
         }
     }
     Column {
         id: controls
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
+        anchors {
+            bottom: parent.bottom
+            bottomMargin: 12
+        }
 
-        LabeledSlider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"; width: container.width}
-        LabeledSlider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"; width: container.width}
-        LabeledSlider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"; width: container.width}
+        LabeledSlider {
+            id: lineWidthCtrl
+            name: qsTr("Outline")
+            width: root.width
+            min: 1
+            max: 10
+            value: 2
+        }
+        LabeledSlider {
+            id: scaleCtrl
+            name: qsTr("Scale")
+            width: root.width
+            min: 0.1
+            max: 10
+            value: 1
+        }
+        LabeledSlider {
+            id: rotateCtrl
+            name: qsTr("Rotate")
+            width: root.width
+            min: 0
+            max: Math.PI * 2
+            value: 0
+        }
+        Row {
+            CheckBox {
+                id: toggleFillCheckBox
+                text: qsTr("Toggle fill")
+            }
+            CheckBox {
+                id: toggleStrokeCheckBox
+                checked: true
+                text: qsTr("Toggle stroke")
+            }
+        }
     }
 }
diff --git a/examples/quick/canvas/squircle/squircle.qml b/examples/quick/canvas/squircle/squircle.qml
index dcbc6fe517..3e4755e02c 100644
--- a/examples/quick/canvas/squircle/squircle.qml
+++ b/examples/quick/canvas/squircle/squircle.qml
@@ -6,21 +6,25 @@ import QtQuick.Controls
 import "../"
 
 Item {
-    id: container
+    id: root
     width: 320
     height: 480
 
     Column {
         spacing: 6
-        anchors.fill: parent
-        anchors.topMargin: 12
+        anchors {
+            fill: parent
+            topMargin: 12
+        }
 
         Label {
-            font.pointSize: 24
-            font.bold: true
-            text: "Squircles"
             anchors.horizontalCenter: parent.horizontalCenter
-            color: "#777"
+            text: qsTr("Squircles")
+            color: Qt.lighter(palette.text)
+            font {
+                pointSize: 24
+                bold: true
+            }
         }
 
         Image {
@@ -32,84 +36,106 @@ Item {
 
         Canvas {
             id: canvas
-            width: 320
-            height: 250
+
+            readonly property color strokeStyle: Qt.darker(fillStyle, 1.2)
+            readonly property color fillStyle: "#6400aa"
+            readonly property int lineWidth: 2
+            readonly property alias nSize: nCtrl.value
+            readonly property alias radius: rCtrl.value
+            readonly property alias fill: toggleFillCheckBox.checked
+            readonly property alias stroke: toggleStrokeCheckBox.checked
+            readonly property real px: width / 2
+            readonly property real py: height / 2 + 10
+            readonly property real alpha: 1.0
+
+            width: root.width
+            height: parent.height - controls.height
             antialiasing: true
 
-            property color strokeStyle: Qt.darker(fillStyle, 1.2)
-            property color fillStyle: "#6400aa"
-
-            property int lineWidth: 2
-            property int nSize: nCtrl.value
-            property real radius: rCtrl.value
-            property bool fill: true
-            property bool stroke: false
-            property real px: width/2
-            property real py: height/2 + 10
-            property real alpha: 1.0
-
-            onRadiusChanged: requestPaint();
-            onLineWidthChanged: requestPaint();
-            onNSizeChanged: requestPaint();
-            onFillChanged: requestPaint();
-            onStrokeChanged: requestPaint();
-
-            onPaint: squircle();
-
-            function squircle() {
-                var ctx = canvas.getContext("2d");
-                var N = canvas.nSize;
-                var R = canvas.radius;
-
-                N=Math.abs(N);
-                var M=N;
-                if (N>100) M=100;
-                if (N<0.00000000001) M=0.00000000001;
-
-                ctx.save();
-                ctx.globalAlpha =canvas.alpha;
-                ctx.fillStyle = "white";
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-                ctx.strokeStyle = canvas.strokeStyle;
-                ctx.fillStyle = canvas.fillStyle;
-                ctx.lineWidth = canvas.lineWidth;
-
-                ctx.beginPath();
-                var i = 0, x, y;
-                for (i=0; i<(2*R+1); i++){
-                    x = Math.round(i-R) + canvas.px;
-                    y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py;
-
-                    if (i == 0)
-                        ctx.moveTo(x, y);
+            onRadiusChanged: requestPaint()
+            onLineWidthChanged: requestPaint()
+            onNSizeChanged: requestPaint()
+            onFillChanged: requestPaint()
+            onStrokeChanged: requestPaint()
+
+            onPaint: function () {
+                let ctx = canvas.getContext("2d")
+                const N = Math.abs(canvas.nSize)
+                const R = canvas.radius
+
+                const M = Math.max(0.00000000001, Math.min(N, 100))
+
+                ctx.save()
+                ctx.globalAlpha = canvas.alpha
+                ctx.fillStyle = "white"
+                ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+                ctx.strokeStyle = canvas.strokeStyle
+                ctx.fillStyle = canvas.fillStyle
+                ctx.lineWidth = canvas.lineWidth
+
+                ctx.beginPath()
+                let i, x, y;
+                for (i = 0; i < (2 * R + 1); i++) {
+                    x = Math.round(i - R) + canvas.px
+                    y = Math.round(Math.pow(Math.abs(Math.pow(R, M) - Math.pow(Math.abs(i - R), M)), 1 / M)) + canvas.py
+
+                    if (i === 0)
+                        ctx.moveTo(x, y)
                     else
-                        ctx.lineTo(x, y);
+                        ctx.lineTo(x, y)
                 }
 
-                for (i=(2*R); i<(4*R+1); i++){
-                    x =Math.round(3*R-i)+canvas.px;
-                    y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py;
-                    ctx.lineTo(x, y);
+                for (i = (2 * R); i < (4 * R + 1); i++) {
+                    x = Math.round(3 * R - i) + canvas.px
+                    y = Math.round(-Math.pow(Math.abs(Math.pow(R, M) - Math.pow(Math.abs(3 * R - i), M)), 1 / M)) + canvas.py
+                    ctx.lineTo(x, y)
                 }
-                ctx.closePath();
+                ctx.closePath()
                 if (canvas.stroke) {
-                    ctx.stroke();
+                    ctx.stroke()
                 }
-
                 if (canvas.fill) {
-                    ctx.fill();
+                    ctx.fill()
                 }
-                ctx.restore();
+                ctx.restore()
             }
         }
 
     }
     Column {
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
+        id: controls
+        anchors {
+            bottom: parent.bottom
+            bottomMargin: 12
+        }
 
-        LabeledSlider {id: nCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "N"; width: container.width}
-        LabeledSlider {id: rCtrl ; min: 30 ; max: 180 ; init: 60 ; name: "Radius"; width: container.width}
+        LabeledSlider {
+            id: nCtrl
+            name: qsTr("N")
+            width: root.width
+            min: 1
+            max: 10
+            value: 2
+        }
+        LabeledSlider {
+            id: rCtrl
+            name: qsTr("Radius")
+            width: root.width
+            min: 30
+            max: 180
+            value: 60
+        }
+        Row {
+            CheckBox {
+                id: toggleFillCheckBox
+                text: qsTr("Toggle fill")
+            }
+            CheckBox {
+                id: toggleStrokeCheckBox
+                checked: true
+                text: qsTr("Toggle stroke")
+            }
+        }
     }
 }
diff --git a/examples/quick/canvas/tiger/tiger.qml b/examples/quick/canvas/tiger/tiger.qml
index 7110f97f56..e936619411 100644
--- a/examples/quick/canvas/tiger/tiger.qml
+++ b/examples/quick/canvas/tiger/tiger.qml
@@ -1,4 +1,4 @@
-// Copyright (C) 2017 The Qt Company Ltd.
+// Copyright (C) 2021 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 import QtQuick
@@ -7,92 +7,113 @@ import "../"
 import "tiger.js" as Tiger
 
 Item {
-    id: container
+    id: root
     width: 320
     height: 480
 
     Column {
         spacing: 6
-        anchors.fill: parent
-        anchors.topMargin: 12
+        anchors {
+            fill: parent
+            topMargin: 12
+        }
 
         Label {
-            font.pointSize: 24
-            font.bold: true
-            text: "Tiger with SVG path"
             anchors.horizontalCenter: parent.horizontalCenter
-            color: "#777"
+            text: qsTr("Tiger with SVG path")
+            color: Qt.lighter(palette.text)
+            font {
+                pointSize: 24
+                bold: true
+            }
         }
 
         Canvas {
             id: canvas
-            width: 320
-            height: 280
+
+            readonly property real alpha: alphaCtrl.value
+            readonly property real scale: scaleCtrl.value
+            readonly property real rotate: rotateCtrl.value
+
+            width: root.width
+            height: parent.height - controls.height
             antialiasing: true
 
-            property string strokeStyle: "steelblue"
-            property string fillStyle: "yellow"
-            property bool fill: true
-            property bool stroke: true
-            property real alpha: alphaCtrl.value
-            property real scale: scaleCtrl.value
-            property real rotate: rotateCtrl.value
-            property int frame: 0
-
-            onFillChanged: requestPaint();
-            onStrokeChanged: requestPaint();
-            onAlphaChanged: requestPaint();
-            onScaleChanged: requestPaint();
-            onRotateChanged: requestPaint();
-
-            onPaint: {
-                var ctx = canvas.getContext('2d');
-                var originX = canvas.width/2 + 30
-                var originY = canvas.height/2 + 60
-
-                ctx.save();
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                ctx.globalAlpha = canvas.alpha;
-                ctx.globalCompositeOperation = "source-over";
+            onAlphaChanged: requestPaint()
+            onScaleChanged: requestPaint()
+            onRotateChanged: requestPaint()
+
+            onPaint: function() {
+                let ctx = canvas.getContext('2d')
+                const originX = canvas.width / 2 + 30
+                const originY = canvas.height / 2 + 60
+
+                ctx.save()
+                ctx.clearRect(0, 0, canvas.width, canvas.height)
+                ctx.globalAlpha = canvas.alpha
+                ctx.globalCompositeOperation = "source-over"
 
                 ctx.translate(originX, originY)
-                ctx.scale(canvas.scale, canvas.scale);
-                ctx.rotate(canvas.rotate);
+                ctx.scale(canvas.scale, canvas.scale)
+                ctx.rotate(canvas.rotate)
                 ctx.translate(-originX, -originY)
 
-                ctx.strokeStyle = Qt.rgba(.3, .3, .3,1);
-                ctx.lineWidth = 1;
+                ctx.strokeStyle = Qt.rgba(.3, .3, .3,1)
+                ctx.lineWidth = 1
 
                 //! [0]
-                for (var i = 0; i < Tiger.tiger.length; i++) {
-                    if (Tiger.tiger[i].width != undefined)
-                        ctx.lineWidth = Tiger.tiger[i].width;
+                for (let i = 0; i < Tiger.tiger.length; i++) {
+                    if (Tiger.tiger[i].width !== undefined)
+                        ctx.lineWidth = Tiger.tiger[i].width
 
-                    if (Tiger.tiger[i].path != undefined)
-                        ctx.path = Tiger.tiger[i].path;
+                    if (Tiger.tiger[i].path !== undefined)
+                        ctx.path = Tiger.tiger[i].path
 
-                    if (Tiger.tiger[i].fill != undefined) {
-                        ctx.fillStyle = Tiger.tiger[i].fill;
-                        ctx.fill();
+                    if (Tiger.tiger[i].fill !== undefined) {
+                        ctx.fillStyle = Tiger.tiger[i].fill
+                        ctx.fill()
                     }
 
-                    if (Tiger.tiger[i].stroke != undefined) {
-                        ctx.strokeStyle = Tiger.tiger[i].stroke;
-                        ctx.stroke();
+                    if (Tiger.tiger[i].stroke !== undefined) {
+                        ctx.strokeStyle = Tiger.tiger[i].stroke
+                        ctx.stroke()
                     }
                 }
                 //! [0]
-                ctx.restore();
+                ctx.restore()
             }
         }
     }
     Column {
         id: controls
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
+        anchors {
+            bottom: parent.bottom
+            bottomMargin: 12
+        }
 
-        LabeledSlider {id: scaleCtrl ; min: 0.1 ; max: 1 ; init: 0.3 ; name: "Scale"; width: container.width}
-        LabeledSlider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"; width: container.width}
-        LabeledSlider {id: alphaCtrl ; min: 0 ; max: 1 ; init: 1 ; name: "Alpha"; width: container.width}
+        LabeledSlider {
+            id: scaleCtrl
+            name: qsTr("Scale")
+            width: root.width
+            min: 0.1
+            max: 1
+            value: 0.3
+        }
+        LabeledSlider {
+            id: rotateCtrl
+            name: qsTr("Rotate")
+            width: root.width
+            min: 0
+            max: Math.PI * 2
+            value: 0
+        }
+        LabeledSlider {
+            id: alphaCtrl
+            name: qsTr("Alpha")
+            width: root.width
+            min: 0
+            max: 1
+            value: 1
+        }
     }
 }