Various improvements to Canvas examples

I noticed these examples were rather "aestetically
challenged" and decided to make it a test case for our
WIP style guidelines.

- Use consistent margins (12 px)
- Use proposed color palettes
- Use proposed fonts and header styles

I created a new Slider graphic and moved this into
the shared folder as I think it is useful for other examples.

I removed a lot of unused files which seem to have been added
but never actually used.

I also found several bugs in our implementation, including
not scaling or rotation around the correct origin.

In many cases I simplified the examples, removing
variables/sliders where they did not add significantly
to the example itself.

Change-Id: Ie09da33deaf56a3ec45a2031b87a24a8602e994a
Reviewed-by: Samuel Rødal <samuel.rodal@digia.com>
Reviewed-by: Jerome Pasion <jerome.pasion@digia.com>
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>

28 files changed, 623 insertions, 1020 deletions

diff --git a/examples/quick/canvas/bezierCurve/bezierCurve.qml b/examples/quick/canvas/bezierCurve/bezierCurve.qml
index 386d1d73d3..281ca9399e 100644
--- a/examples/quick/canvas/bezierCurve/bezierCurve.qml
+++ b/examples/quick/canvas/bezierCurve/bezierCurve.qml
@@ -40,84 +40,88 @@
 
 import QtQuick 2.0
 import "../contents"
+import "../../shared"
+
 Item {
-  id:container
-  width:320
-  height:480
+    id:container
+    width: 320
+    height: 480
 
-  Column {
-    spacing:5
-    anchors.fill:parent
-    Text { font.pointSize:15; text:"Bezier Curve"; anchors.horizontalCenter:parent.horizontalCenter}
+    Column {
+        spacing:5
+        anchors.fill: parent
+        anchors.topMargin: 12
 
-    Canvas {
-      id:canvas
-      width:320
-      height:280
-      property string strokeStyle:"red"
-      property string fillStyle:"red"
-      property int lineWidth:lineWidthCtrl.value
-      property bool fill:true
-      property bool stroke:true
-      property real alpha:alphaCtrl.value
-      property real scaleX : scaleXCtrl.value
-      property real scaleY : scaleYCtrl.value
-      property real rotate : rotateCtrl.value
-      antialiasing: true
+        Text {
+            font.pointSize: 24
+            font.bold: true
+            text: "Bezier Curve"
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "#777"
+        }
 
-      Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } }
-      Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
-      Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
+        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
+            antialiasing: true
 
-    onLineWidthChanged:requestPaint();
-    onFillChanged:requestPaint();
-    onStrokeChanged:requestPaint();
-    onAlphaChanged:requestPaint();
-    onScaleXChanged:requestPaint();
-    onScaleYChanged:requestPaint();
-    onRotateChanged:requestPaint();
+            onLineWidthChanged:requestPaint();
+            onFillChanged:requestPaint();
+            onStrokeChanged:requestPaint();
+            onScaleChanged:requestPaint();
+            onRotateChanged:requestPaint();
 
-    onPaint: {
-      var ctx = canvas.getContext('2d');
-      ctx.save();
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.globalAlpha = canvas.alpha;
-      ctx.strokeStyle = canvas.strokeStyle;
-      ctx.fillStyle = canvas.fillStyle;
-      ctx.lineWidth = canvas.lineWidth;
-      ctx.scale(canvas.scaleX, canvas.scaleY);
-      ctx.rotate(canvas.rotate);
-      //! [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();
-      //! [0]
-      if (canvas.fill)
-         ctx.fill();
-      if (canvas.stroke)
-         ctx.stroke();
-      ctx.restore();
-    }
-  }
+            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;
 
-    Rectangle {
-        id:controls
-        width:320
-        height:150
-        Column {
-          spacing:3
-          Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"}
-          Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"}
-          Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"}
-          Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"}
-          Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
+                ctx.translate(originX, originY)
+                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();
+                //! [0]
+                if (canvas.fill)
+                    ctx.fill();
+                if (canvas.stroke)
+                    ctx.stroke();
+                ctx.restore();
+            }
         }
     }
-  }
+    Column {
+        id: controls
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        Slider {id: lineWidthCtrl; min: 1; max: 10; init: 2; name: "Outline"}
+        Slider {id: scaleCtrl; min: 0.1; max: 10; init: 1; name: "Scale"}
+        Slider {id: rotateCtrl; min: 0; max: Math.PI*2; init: 0; name: "Rotate"}
+    }
 }
diff --git a/examples/quick/canvas/canvas.qrc b/examples/quick/canvas/canvas.qrc
index 06d39f3624..cfdfc844b9 100644
--- a/examples/quick/canvas/canvas.qrc
+++ b/examples/quick/canvas/canvas.qrc
@@ -3,24 +3,7 @@
         <file>canvas.qml</file>
         <file>bezierCurve/bezierCurve.qml</file>
         <file>clip/clip.qml</file>
-        <file>contents/Button.qml</file>
         <file>contents/qt-logo.png</file>
-        <file>contents/ScrollBar.qml</file>
-        <file>contents/Slider.qml</file>
-        <file>contents/TitleBar.qml</file>
-        <file>contents/ToolBar.qml</file>
-        <file>contents/images/button-pressed.png</file>
-        <file>contents/images/button.png</file>
-        <file>contents/images/default.svg</file>
-        <file>contents/images/gloss.png</file>
-        <file>contents/images/lineedit.png</file>
-        <file>contents/images/lineedit.sci</file>
-        <file>contents/images/quit.png</file>
-        <file>contents/images/stripes.png</file>
-        <file>contents/images/titlebar.png</file>
-        <file>contents/images/titlebar.sci</file>
-        <file>contents/images/toolbutton.png</file>
-        <file>contents/images/toolbutton.sci</file>
         <file>quadraticCurveTo/quadraticCurveTo.qml</file>
         <file>roundedrect/roundedrect.qml</file>
         <file>smile/smile.qml</file>
diff --git a/examples/quick/canvas/clip/clip.qml b/examples/quick/canvas/clip/clip.qml
index 1e9728ff8d..71def05d20 100644
--- a/examples/quick/canvas/clip/clip.qml
+++ b/examples/quick/canvas/clip/clip.qml
@@ -40,111 +40,109 @@
 
 import QtQuick 2.0
 import "../contents"
+import "../../shared"
+
 Item {
-  id:container
-  width:320
-  height:480
+    id:container
+    width: 320
+    height: 480
 
-  Column {
-    spacing:5
-    anchors.fill:parent
-    Text { font.pointSize:15; text:"Makes squircle icon with clip"; anchors.horizontalCenter:parent.horizontalCenter}
-    Canvas {
-      id:canvas
-      width:320
-      height:280
-      property string strokeStyle:"blue"
-      property string fillStyle:"steelblue"
-      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:xCtrl.value
-      property real py:yCtrl.value
-      property real alpha:alphaCtrl.value
-      property string imagefile:"../contents/qt-logo.png"
-      antialiasing: true
-      Component.onCompleted:loadImage(canvas.imagefile);
+    Column {
+        spacing:5
+        anchors.fill: parent
+        anchors.topMargin: 12
+        Text {
+            font.pointSize: 24
+            font.bold: true
+            text: "Squircle with Clip"
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "#777"
+        }
+        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"
+            antialiasing: true
+            Component.onCompleted:loadImage(canvas.imagefile);
 
-    onAlphaChanged:requestPaint();
-    onRadiusChanged:requestPaint();
-    onLineWidthChanged:requestPaint();
-    onNSizeChanged:requestPaint();
-    onFillChanged:requestPaint();
-    onStrokeChanged:requestPaint();
-    onPxChanged:requestPaint();
-    onPyChanged:requestPaint();
-    
-    onImageLoaded : requestPaint();
+            onRadiusChanged:requestPaint();
+            onLineWidthChanged:requestPaint();
+            onNSizeChanged:requestPaint();
+            onFillChanged:requestPaint();
+            onStrokeChanged:requestPaint();
+            onImageLoaded : requestPaint();
+            onPaint: squcirle();
 
-    onPaint: squcirle();
+            function squcirle() {
+                var ctx = canvas.getContext("2d");
+                var N = canvas.nSize;
+                var R = canvas.radius;
 
-    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;
 
-      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.save();
-      ctx.globalAlpha =canvas.alpha;
-      ctx.fillStyle = "gray";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.strokeStyle = canvas.strokeStyle;
+                ctx.fillStyle = canvas.fillStyle;
+                ctx.lineWidth = canvas.lineWidth;
 
-      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;
 
-      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);
+                    else
+                        ctx.lineTo(x, y);
+                }
 
-         if (i == 0)
-           ctx.moveTo(x, y);
-         else
-           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();
+                if (canvas.stroke) {
+                    ctx.stroke();
+                }
 
-      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();
-      if (canvas.stroke) {
-          ctx.stroke();
-      }
+                if (canvas.fill) {
+                    ctx.fill();
+                }
 
-      if (canvas.fill) {
-          ctx.fill();
-      }
-      //! [0]
-      ctx.clip();
+                //! [0]
+                ctx.clip();
+                ctx.drawImage(canvas.imagefile, 0, 0);
+                //! [0]
 
-      ctx.drawImage(canvas.imagefile, 0, 0);
-      //! [0]
-      ctx.restore();
-    }
-  }
-
-    Rectangle {
-        id:controls
-        width:320
-        height:150
-        Column {
-          spacing:3
-          Slider {id:nCtrl; width:300; height:20; min:1; max:10; init:4; name:"N"}
-          Slider {id:rCtrl; width:300; height:20; min:30; max:180; init:100; name:"Radius"}
-          Slider {id:xCtrl; width:300; height:20; min:50; max:300; init:180; name:"X"}
-          Slider {id:yCtrl; width:300; height:20; min:30; max:300; init:220; name:"Y"}
-          Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
+                ctx.restore();
+            }
         }
     }
-  }
+    Column {
+        id: controls
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        Slider {id: nCtrl; min: 1; max: 10; init: 4; name:"N"}
+        Slider {id: rCtrl; min: 30; max: 180; init: 80; name:"Radius"}
+    }
 }
diff --git a/examples/quick/canvas/contents/Button.qml b/examples/quick/canvas/contents/Button.qml
deleted file mode 100644
index efdf4eae76..0000000000
--- a/examples/quick/canvas/contents/Button.qml
+++ /dev/null
@@ -1,87 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
-    id: container
-
-    signal clicked
-
-    property string text
-    width: buttonText.width + 28
-    height: buttonText.height + 14
-
-    BorderImage {
-        id: buttonImage
-        source: "images/toolbutton.sci"
-        width: container.width - 10
-        height: container.height
-    }
-    BorderImage {
-        id: pressed
-        opacity: 0
-        source: "images/toolbutton.sci"
-        width: container.width - 10
-        height: container.height
-    }
-    MouseArea {
-        id: mouseRegion
-        anchors.fill: buttonImage
-        onClicked: { container.clicked(); }
-    }
-    Text {
-        id: buttonText
-        color: "white"
-        anchors.centerIn: buttonImage
-        font.bold: true
-        font.pointSize: 15
-        text: container.text
-        style: Text.Raised
-        styleColor: "black"
-    }
-    states: [
-        State {
-            name: "Pressed"
-            when: mouseRegion.pressed == true
-            PropertyChanges { target: pressed; opacity: 1 }
-        }
-    ]
-}
diff --git a/examples/quick/canvas/contents/ScrollBar.qml b/examples/quick/canvas/contents/ScrollBar.qml
deleted file mode 100644
index 2c51e0fc48..0000000000
--- a/examples/quick/canvas/contents/ScrollBar.qml
+++ /dev/null
@@ -1,74 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the Qt Mobility Components.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
-    id: scrollBar
-    // The properties that define the scrollbar's state.
-    // position and pageSize are in the range 0.0 - 1.0.  They are relative to the
-    // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
-    // of the height of the view.
-    // orientation can be either 'Vertical' or 'Horizontal'
-    property real position
-    property real pageSize
-    property string orientation : "Vertical"
-    property alias bgColor: background.color
-    property alias fgColor: thumb.color
-
-    // A light, semi-transparent background
-    Rectangle {
-        id: background
-        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
-        color: "white"; opacity: 0.3
-        anchors.fill: parent
-    }
-    // Size the bar to the required size, depending upon the orientation.
-    Rectangle {
-        id: thumb
-        opacity: 0.7
-        color: "black"
-        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
-        x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
-        y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
-        width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
-        height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
-    }
-}
diff --git a/examples/quick/canvas/contents/TitleBar.qml b/examples/quick/canvas/contents/TitleBar.qml
deleted file mode 100644
index 1698a2a98a..0000000000
--- a/examples/quick/canvas/contents/TitleBar.qml
+++ /dev/null
@@ -1,70 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
-    id: titleBar
-    property string title: ""
-
-    BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
-
-    Image {
-        id: quitButton
-        anchors.left: parent.left//; anchors.leftMargin: 0
-        anchors.verticalCenter: parent.verticalCenter
-        source: "images/quit.png"
-        MouseArea {
-            anchors.fill: parent
-            onClicked: Qt.quit()
-        }
-    }
-
-    Text {
-        id: categoryText
-        anchors {
-            left: quitButton.right; right: parent.right; //leftMargin: 10; rightMargin: 10
-            verticalCenter: parent.verticalCenter
-        }
-        elide: Text.ElideLeft
-        text: title
-        font.bold: true; font.pointSize: 20; color: "White"; style: Text.Raised; styleColor: "Black"
-    }
-}
diff --git a/examples/quick/canvas/contents/ToolBar.qml b/examples/quick/canvas/contents/ToolBar.qml
deleted file mode 100644
index 005a6b144e..0000000000
--- a/examples/quick/canvas/contents/ToolBar.qml
+++ /dev/null
@@ -1,69 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/legal
-**
-** This file is part of the examples of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
-    id: toolbar
-
-    property variant labels
-    signal buttonClicked(int index)
-
-    BorderImage {
-        source: "images/titlebar.sci"
-        width: parent.width
-        height: parent.height + 14
-        y: -7
-    }
-
-    Row {
-        y: 3
-        anchors.horizontalCenter: parent.horizontalCenter
-        Repeater {
-            model: toolbar.labels
-            delegate:
-                Button {
-                    text: modelData
-                    onClicked: toolbar.buttonClicked(model.index)
-                }
-        }
-    }
-
-}
diff --git a/examples/quick/canvas/contents/images/button-pressed.png b/examples/quick/canvas/contents/images/button-pressed.png
deleted file mode 100644
index e434d327f2..0000000000
--- a/examples/quick/canvas/contents/images/button-pressed.png
+++ /dev/null
diff --git a/examples/quick/canvas/contents/images/button.png b/examples/quick/canvas/contents/images/button.png
deleted file mode 100644
index 56a63ce641..0000000000
--- a/examples/quick/canvas/contents/images/button.png
+++ /dev/null
diff --git a/examples/quick/canvas/contents/images/default.svg b/examples/quick/canvas/contents/images/default.svg
deleted file mode 100644
index 248199cc4e..0000000000
--- a/examples/quick/canvas/contents/images/default.svg
+++ /dev/null
@@ -1,82 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" id="svg1306">
-  <defs id="defs1308">
-    <linearGradient id="linearGradient4083">
-      <stop id="stop4085" offset="0" stop-color="#ffffff" stop-opacity="0"/>
-      <stop offset="0.75" id="stop4089" stop-color="#ffffff" stop-opacity="0"/>
-      <stop id="stop4087" offset="1" stop-color="#ffffff" stop-opacity="1"/>
-    </linearGradient>
-    <linearGradient id="linearGradient4032">
-      <stop id="stop4034" offset="0" stop-color="#fff7c2" stop-opacity="0.63829786"/>
-      <stop offset="0.59394139" id="stop4036" stop-color="#fcaf3e" stop-opacity="0.18348624"/>
-      <stop id="stop4038" offset="0.83850551" stop-color="#fcaf3e" stop-opacity="0.50458717"/>
-      <stop id="stop4040" offset="1" stop-color="#fcaf3e" stop-opacity="1"/>
-    </linearGradient>
-    <linearGradient id="linearGradient4026">
-      <stop id="stop4028" offset="0" stop-color="#fff9c6" stop-opacity="1"/>
-      <stop offset="0.54166669" id="stop4042" stop-color="#fff28c" stop-opacity="1"/>
-      <stop id="stop4030" offset="1" stop-color="#ffea85" stop-opacity="1"/>
-    </linearGradient>
-    <linearGradient xlink:href="#linearGradient4026" id="linearGradient3168" gradientUnits="userSpaceOnUse" x1="-28.968945" y1="-25.326815" x2="-37.19698" y2="-9.5590506"/>
-    <radialGradient xlink:href="#linearGradient4032" id="radialGradient4020" cx="-33.519073" cy="-22.113297" fx="-33.519073" fy="-22.113297" r="9.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.487739,1.292402,-1.10267,0.497242,-41.77393,32.41492)"/>
-    <radialGradient xlink:href="#linearGradient4083" id="radialGradient4081" cx="23.99999" cy="23.381506" fx="23.99999" fy="23.381506" r="19.141981" gradientTransform="matrix(1.006701,2.235326e-16,-2.23715e-16,1.007522,-0.160816,0.426981)" gradientUnits="userSpaceOnUse"/>
-  </defs>
-  
-  <metadata id="metadata1311">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-        <dc:title>weather-clear</dc:title>
-        <dc:date>January 2006</dc:date>
-        <dc:creator>
-          <cc:Agent>
-            <dc:title>Ryan Collier (pseudo)</dc:title>
-          </cc:Agent>
-        </dc:creator>
-        <dc:publisher>
-          <cc:Agent>
-            <dc:title>http://www.tango-project.org</dc:title>
-          </cc:Agent>
-        </dc:publisher>
-        <dc:source>http://www.pseudocode.org</dc:source>
-        <dc:subject>
-          <rdf:Bag>
-            <rdf:li>weather</rdf:li>
-            <rdf:li>applet</rdf:li>
-            <rdf:li>notification</rdf:li>
-          </rdf:Bag>
-        </dc:subject>
-        <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/"/>
-        <dc:contributor>
-          <cc:Agent>
-            <dc:title>Garrett LeSage</dc:title>
-          </cc:Agent>
-        </dc:contributor>
-      </cc:Work>
-      <cc:License rdf:about="http://creativecommons.org/licenses/by-sa/2.0/">
-        <cc:permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
-        <cc:permits rdf:resource="http://web.resource.org/cc/Distribution"/>
-        <cc:requires rdf:resource="http://web.resource.org/cc/Notice"/>
-        <cc:requires rdf:resource="http://web.resource.org/cc/Attribution"/>
-        <cc:permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/>
-        <cc:requires rdf:resource="http://web.resource.org/cc/ShareAlike"/>
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g id="layer1">
-    <g>
-      <g opacity="0.7">
-        <path d="M 24 2.5 L 21.625 9.1875 C 22.399034 9.0641318 23.191406 9 24 9 C 24.808594 9 25.600966 9.0641317 26.375 9.1875 L 24 2.5 z M 8.8125 8.78125 L 11.84375 15.21875 C 12.779034 13.928569 13.928569 12.779034 15.21875 11.84375 L 8.8125 8.78125 z M 39.21875 8.78125 L 32.78125 11.84375 C 34.071431 12.779034 35.220966 13.928569 36.15625 15.21875 L 39.21875 8.78125 z M 9.1875 21.59375 L 2.5 23.96875 L 9.1875 26.34375 C 9.0673373 25.57952 9 24.797813 9 24 C 9 23.180625 9.0608858 22.377571 9.1875 21.59375 z M 38.8125 21.625 C 38.935868 22.399034 39 23.191406 39 24 C 39 24.808594 38.935868 25.600966 38.8125 26.375 L 45.5 24 L 38.8125 21.625 z M 11.84375 32.78125 L 8.8125 39.1875 L 15.21875 36.15625 C 13.928569 35.220966 12.779034 34.071431 11.84375 32.78125 z M 36.15625 32.78125 C 35.229789 34.05926 34.087617 35.194799 32.8125 36.125 L 39.21875 39.1875 L 36.15625 32.78125 z M 21.625 38.8125 L 24 45.5 L 26.375 38.8125 C 25.600966 38.935868 24.808594 39 24 39 C 23.191406 39 22.399034 38.935868 21.625 38.8125 z " fill="#fce94f" fill-opacity="1" stroke="#fcaf3e" stroke-width="0.73732895" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
-        <path d="M 24 5.25 L 22.65625 9.0625 C 23.098888 9.0231486 23.547187 9 24 9 C 24.452813 9 24.901112 9.0231486 25.34375 9.0625 L 24 5.25 z M 10.78125 10.75 L 12.5 14.375 C 13.071538 13.694089 13.724004 13.038745 14.40625 12.46875 L 10.78125 10.75 z M 37.25 10.75 L 33.625 12.46875 C 34.304675 13.038189 34.961811 13.695325 35.53125 14.375 L 37.25 10.75 z M 9.0625 22.625 L 5.28125 23.96875 L 9.0625 25.3125 C 9.024981 24.880146 9 24.442031 9 24 C 9 23.536406 9.0212735 23.077908 9.0625 22.625 z M 38.9375 22.65625 C 38.976851 23.098888 39 23.547187 39 24 C 39 24.452813 38.976851 24.901112 38.9375 25.34375 L 42.71875 24 L 38.9375 22.65625 z M 35.53125 33.59375 C 34.958293 34.27954 34.309985 34.957363 33.625 35.53125 L 37.25 37.25 L 35.53125 33.59375 z M 12.5 33.625 L 10.78125 37.21875 L 14.375 35.5 C 13.702932 34.935884 13.064116 34.297068 12.5 33.625 z M 22.65625 38.9375 L 24 42.71875 L 25.34375 38.9375 C 24.901112 38.976851 24.452813 39 24 39 C 23.547187 39 23.098888 38.976851 22.65625 38.9375 z " fill="none" fill-opacity="1" stroke="url(#radialGradient4081)" stroke-width="0.84646249" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
-      </g>
-      <g>
-        <g>
-          <path transform="matrix(0.778062,-1.061285,1.061287,0.778062,67.47952,3.641324)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1  -41.5,-17.5 A 9.5 9.5 0 1 1  -22.5 -17.5 z" fill="#ffee54" fill-opacity="1" stroke="#fcaf3e" stroke-width="0.75991178" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
-          <path transform="matrix(1.244257,-0.167707,0.216642,1.251844,67.61648,40.527)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1  -41.5,-17.5 A 9.5 9.5 0 1 1  -22.5 -17.5 z" fill="url(#radialGradient4020)" fill-opacity="1" stroke="none" stroke-width="1.01737845" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
-          <path transform="matrix(0.715791,-0.976349,0.97635,0.715792,64.00044,5.269544)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1  -41.5,-17.5 A 9.5 9.5 0 1 1  -22.5 -17.5 z" fill="none" fill-opacity="1" stroke="url(#linearGradient3168)" stroke-width="0.82601947" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/examples/quick/canvas/contents/images/gloss.png b/examples/quick/canvas/contents/images/gloss.png
deleted file mode 100755
index 5d370cd93d..0000000000
--- a/examples/quick/canvas/contents/images/gloss.png
+++ /dev/null
diff --git a/examples/quick/canvas/contents/images/lineedit.png b/examples/quick/canvas/contents/images/lineedit.png
deleted file mode 100755
index 2cc38dc35b..0000000000
--- a/examples/quick/canvas/contents/images/lineedit.png
+++ /dev/null
diff --git a/examples/quick/canvas/contents/images/lineedit.sci b/examples/quick/canvas/contents/images/lineedit.sci
deleted file mode 100644
index 054bff78be..0000000000
--- a/examples/quick/canvas/contents/images/lineedit.sci
+++ /dev/null
@@ -1,5 +0,0 @@
-border.left: 10
-border.top: 10
-border.bottom: 10
-border.right: 10
-source: lineedit.png
diff --git a/examples/quick/canvas/contents/images/quit.png b/examples/quick/canvas/contents/images/quit.png
deleted file mode 100755
index 5bda1b6e0d..0000000000
--- a/examples/quick/canvas/contents/images/quit.png
+++ /dev/null
diff --git a/examples/quick/canvas/contents/images/stripes.png b/examples/quick/canvas/contents/images/stripes.png
deleted file mode 100755
index 9f36727ea4..0000000000
--- a/examples/quick/canvas/contents/images/stripes.png
+++ /dev/null
diff --git a/examples/quick/canvas/contents/images/titlebar.png b/examples/quick/canvas/contents/images/titlebar.png
deleted file mode 100755
index 51c90082d0..0000000000
--- a/examples/quick/canvas/contents/images/titlebar.png
+++ /dev/null
diff --git a/examples/quick/canvas/contents/images/titlebar.sci b/examples/quick/canvas/contents/images/titlebar.sci
deleted file mode 100644
index 0418d94cd6..0000000000
--- a/examples/quick/canvas/contents/images/titlebar.sci
+++ /dev/null
@@ -1,5 +0,0 @@
-border.left: 10
-border.top: 12
-border.bottom: 12
-border.right: 10
-source: titlebar.png
diff --git a/examples/quick/canvas/contents/images/toolbutton.png b/examples/quick/canvas/contents/images/toolbutton.png
deleted file mode 100755
index 11310013ee..0000000000
--- a/examples/quick/canvas/contents/images/toolbutton.png
+++ /dev/null
diff --git a/examples/quick/canvas/contents/images/toolbutton.sci b/examples/quick/canvas/contents/images/toolbutton.sci
deleted file mode 100644
index 9e4f965307..0000000000
--- a/examples/quick/canvas/contents/images/toolbutton.sci
+++ /dev/null
@@ -1,5 +0,0 @@
-border.left: 15
-border.top: 4
-border.bottom: 4
-border.right: 15
-source: toolbutton.png
diff --git a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
index 9e03c03b98..0756d339ff 100644
--- a/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
+++ b/examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml
@@ -40,91 +40,97 @@
 
 import QtQuick 2.0
 import "../contents"
+import "../../shared"
+
 Item {
-  id:container
-  width:320
-  height:480
+    id:container
+    width:320
+    height:480
 
-  Column {
-    spacing:5
-    anchors.fill:parent
-    Text { font.pointSize:15; text:"Quadratic Curve"; anchors.horizontalCenter:parent.horizontalCenter}
+    Column {
+        spacing:5
+        anchors.fill: parent
+        anchors.topMargin: 12
 
-    Canvas {
-      id:canvas
-      width:320
-      height:280
-      property string strokeStyle:"steelblue"
-      property string fillStyle:"yellow"
-      property int lineWidth:lineWidthCtrl.value
-      property bool fill:true
-      property bool stroke:true
-      property real alpha:alphaCtrl.value
-      property real scaleX : scaleXCtrl.value
-      property real scaleY : scaleYCtrl.value
-      property real rotate : rotateCtrl.value
-      antialiasing: true
+        Text {
+            font.pointSize: 24
+            font.bold: true
+            text: "Quadratic Curve"
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "#777"
+        }
 
-      onLineWidthChanged:requestPaint();
-      onFillChanged:requestPaint();
-      onStrokeChanged:requestPaint();
-      onAlphaChanged:requestPaint();
-      onScaleXChanged:requestPaint();
-      onScaleYChanged:requestPaint();
-      onRotateChanged:requestPaint();
-      Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } }
-      Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
-      Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
+        Canvas {
+            id: canvas
+            width: 320
+            height: 280
 
-      onPaint: {
-          var ctx = canvas.getContext('2d');
-          ctx.save();
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-          ctx.globalAlpha = canvas.alpha;
-          ctx.strokeStyle = canvas.strokeStyle;
-          ctx.fillStyle = canvas.fillStyle;
-          ctx.lineWidth = canvas.lineWidth;
-          ctx.scale(canvas.scaleX, canvas.scaleY);
-          ctx.rotate(canvas.rotate);
-          // ![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();
-          // ![0]
-          if (canvas.fill)
-             ctx.fill();
-          if (canvas.stroke)
-             ctx.stroke();
+            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
 
+            antialiasing: true
 
-          // ![1]
-          ctx.fillStyle="green";
-          ctx.font = "Bold 15px";
+            onLineWidthChanged:requestPaint();
+            onFillChanged:requestPaint();
+            onStrokeChanged:requestPaint();
+            onScaleChanged:requestPaint();
+            onRotateChanged:requestPaint();
 
-          ctx.fillText("QML酷毙了", 30, 60);
-          // ![1]
-          ctx.restore();
-      }
-    }
+            onPaint: {
+                var ctx = canvas.getContext('2d');
+                var originX = 75
+                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;
+
+                ctx.translate(originX, originY)
+                ctx.rotate(canvas.rotate);
+                ctx.scale(canvas.scale, canvas.scale);
+                ctx.translate(-originX, -originY)
 
-    Rectangle {
-        id:controls
-        width:320
-        height:150
-        Column {
-          spacing:3
-          Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"}
-          Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"}
-          Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"}
-          Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"}
-          Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
+                // ![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();
+                // ![0]
+
+                if (canvas.fill)
+                    ctx.fill();
+                if (canvas.stroke)
+                    ctx.stroke();
+
+                ctx.restore();
+
+                // ![1]
+                ctx.fillStyle = "white";
+                ctx.font = "Bold 17px";
+                ctx.fillText("Qt Quick", 110, 140);
+                // ![1]
+            }
         }
     }
-  }
+    Column {
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        Slider {id:lineWidthCtrl; min:1; max:10; init:2; name:"Outline"}
+        Slider {id:scaleCtrl; min:0.1; max:10; init:1; name:"Scale"}
+        Slider {id:rotateCtrl; min:0; max:Math.PI*2; init:0; name:"Rotate"}
+    }
 }
diff --git a/examples/quick/canvas/roundedrect/roundedrect.qml b/examples/quick/canvas/roundedrect/roundedrect.qml
index 42142cef19..5a0a77425a 100644
--- a/examples/quick/canvas/roundedrect/roundedrect.qml
+++ b/examples/quick/canvas/roundedrect/roundedrect.qml
@@ -40,84 +40,82 @@
 
 import QtQuick 2.0
 import "../contents"
+import "../../shared"
+
 Item {
-  id:container
-  width:320
-  height:480
+    id:container
+    width: 320
+    height: 480
 
-  Column {
-    spacing:5
-    anchors.fill:parent
-    Text { font.pointSize:15; text:"Rounded rectangle"; anchors.horizontalCenter:parent.horizontalCenter}
-    Canvas {
-        id:canvas
-        width:320
-        height:280
-        antialiasing: true
+    Column {
+        spacing: 6
+        anchors.fill: parent
+        anchors.topMargin: 12
+        Text {
+            font.pointSize: 24
+            font.bold: true
+            text: "Rounded rectangle"
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "#777"
+        }
+        Canvas {
+            id: canvas
+            width: 320
+            height: 280
+            antialiasing: true
 
-        property int radius: rCtrl.value
-        property int rectx: rxCtrl.value
-        property int recty: ryCtrl.value
-        property int rectWidth: width - 2*rectx
-        property int rectHeight: height - 2*recty
-        property string strokeStyle:"blue"
-        property string fillStyle:"steelblue"
-        property int lineWidth:lineWidthCtrl.value
-        property bool fill:true
-        property bool stroke:true
-        property real alpha:alphaCtrl.value
+            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
 
-        onLineWidthChanged:requestPaint();
-        onFillChanged:requestPaint();
-        onStrokeChanged:requestPaint();
-        onRadiusChanged:requestPaint();
-        onRectxChanged:requestPaint();
-        onRectyChanged:requestPaint();
-        onAlphaChanged:requestPaint();
+            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;
-            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);
-            // draw top right corner
-            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
-            // draw bottom left corner
-            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();
-            if (canvas.fill)
-                ctx.fill();
-            if (canvas.stroke)
-                ctx.stroke();
-            ctx.restore();
+            onPaint: {
+                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);
+                // draw top right corner
+                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
+                // draw bottom left corner
+                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();
+                if (canvas.fill)
+                    ctx.fill();
+                if (canvas.stroke)
+                    ctx.stroke();
+                ctx.restore();
+            }
         }
     }
-
-    Rectangle {
-        id:controls
-        width:320
-        height:150
-        Column {
-          spacing:3
-          Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"}
-          Slider {id:rxCtrl; width:300; height:20; min:5; max:30; init:10; name:"rectx"}
-          Slider {id:ryCtrl; width:300; height:20; min:5; max:30; init:10; name:"recty"}
-          Slider {id:rCtrl; width:300; height:20; min:10; max:100; init:40; name:"Radius"}
-          Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
-        }
+    Column {
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        Slider {id: lineWidthCtrl ; min: 1 ; max: 10; init: 2 ; name: "Outline"}
+        Slider {id: rCtrl ; min: 10 ; max: 80 ; init: 40 ; name: "Radius"}
     }
-  }
 }
diff --git a/examples/quick/canvas/smile/smile.qml b/examples/quick/canvas/smile/smile.qml
index c8b01b305a..0251b1b101 100644
--- a/examples/quick/canvas/smile/smile.qml
+++ b/examples/quick/canvas/smile/smile.qml
@@ -40,87 +40,90 @@
 
 import QtQuick 2.0
 import "../contents"
+import "../../shared"
+
 Item {
-  id:container
-  width:320
-  height:480
+    id: container
+    width: 320
+    height: 480
 
-  Column {
-    spacing:5
-    anchors.fill:parent
-    Text { font.pointSize:15; text:"Smile with arcs"; anchors.horizontalCenter:parent.horizontalCenter}
+    Column {
+        spacing: 6
+        anchors.fill: parent
+        anchors.topMargin: 12
 
-    Canvas {
-        id:canvas
-        width:320
-        height:280
-        antialiasing: true
+        Text {
+            font.pointSize: 24
+            font.bold: true
+            text: "Smile with arcs"
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "#777"
+        }
 
-        property string strokeStyle:"green"
-        property string fillStyle:"yellow"
-        property int lineWidth:lineWidthCtrl.value
-        property bool fill:true
-        property bool stroke:true
-        property real alpha:alphaCtrl.value
-        property real scaleX : scaleXCtrl.value
-        property real scaleY : scaleYCtrl.value
-        property real rotate : rotateCtrl.value
+        Canvas {
+            id: canvas
+            width: 320
+            height: parent.height - controls.height
+            antialiasing: true
 
-        onLineWidthChanged:requestPaint();
-        onFillChanged:requestPaint();
-        onStrokeChanged:requestPaint();
-        onAlphaChanged:requestPaint();
-        onScaleXChanged:requestPaint();
-        onScaleYChanged:requestPaint();
-        onRotateChanged:requestPaint();
+            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
 
-        Behavior on scaleX { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite } }
-        Behavior on scaleY { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
-        Behavior on rotate { SpringAnimation { spring: 2; damping: 0.2; loops:Animation.Infinite} }
+            onLineWidthChanged:requestPaint();
+            onFillChanged:requestPaint();
+            onStrokeChanged:requestPaint();
+            onScaleChanged:requestPaint();
+            onRotateChanged:requestPaint();
 
-    onPaint: {
-          var ctx = canvas.getContext('2d');
-          ctx.save();
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-          ctx.globalAlpha = canvas.alpha;
-          ctx.strokeStyle = canvas.strokeStyle;
-          ctx.fillStyle = canvas.fillStyle;
-          ctx.lineWidth = canvas.lineWidth;
-          ctx.scale(canvas.scaleX, canvas.scaleY);
-          ctx.rotate(canvas.rotate);
-          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(75,70);
-          ctx.arc(75,70,35,0,Math.PI,false);   // Mouth (clockwise)
-          ctx.moveTo(60,65);
-          ctx.arc(60,65,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,65);
-          ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
-          ctx.closePath();
-          if (canvas.fill)
-             ctx.fill();
-          if (canvas.stroke)
-             ctx.stroke();
-          ctx.restore();
-        }
-    }
+            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;
+
+                ctx.translate(originX, originY)
+                ctx.scale(canvas.scale, canvas.scale);
+                ctx.rotate(canvas.rotate);
+                ctx.translate(-originX, -originY)
 
-    Rectangle {
-        id:controls
-        width:320
-        height:150
-        Column {
-          spacing:3
-          Slider {id:lineWidthCtrl; width:300; height:20; min:1; max:10; init:2; name:"Line width"}
-          Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleX"}
-          Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:1; name:"ScaleY"}
-          Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"}
-          Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
+                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(75,70);
+                ctx.arc(75,70,35,0,Math.PI,false);   // Mouth (clockwise)
+                ctx.moveTo(60,65);
+                ctx.arc(60,65,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,65);
+                ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
+                ctx.closePath();
+                if (canvas.fill)
+                    ctx.fill();
+                if (canvas.stroke)
+                    ctx.stroke();
+                ctx.restore();
+            }
         }
     }
-  }
+    Column {
+        id: controls
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        Slider {id: lineWidthCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "Outline"}
+        Slider {id: scaleCtrl ; min: 0.1 ; max: 10 ; init: 1 ; name: "Scale"}
+        Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"}
+    }
 }
diff --git a/examples/quick/canvas/squircle/squircle.qml b/examples/quick/canvas/squircle/squircle.qml
index 3044816479..4e5c5a49fc 100644
--- a/examples/quick/canvas/squircle/squircle.qml
+++ b/examples/quick/canvas/squircle/squircle.qml
@@ -40,114 +40,111 @@
 
 import QtQuick 2.0
 import "../contents"
+import "../../shared"
+
 Item {
-  id:container
-  width:320
-  height:480
-
-  Column {
-    spacing:5
-    anchors.fill:parent
-    Text { font.pointSize:15; text:"Squircles"; anchors.horizontalCenter:parent.horizontalCenter}
-    Image {
-       anchors.horizontalCenter:parent.horizontalCenter
-       source:"squircle.png"
-       width:250
-       height:25
-    }
-    Canvas {
-        id:canvas
-        width:320
-        height:250
-        antialiasing: true
-
-        property string strokeStyle:"blue"
-        property string fillStyle:"steelblue"
-        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:xCtrl.value
-        property real py:yCtrl.value
-        property real alpha:alphaCtrl.value
-
-        onAlphaChanged:requestPaint();
-        onRadiusChanged:requestPaint();
-        onLineWidthChanged:requestPaint();
-        onNSizeChanged:requestPaint();
-        onFillChanged:requestPaint();
-        onStrokeChanged:requestPaint();
-        onPxChanged:requestPaint();
-        onPyChanged: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 = "gray";
-          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);
-             else
-               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();
-          if (canvas.stroke) {
-              ctx.stroke();
-          }
-
-          if (canvas.fill) {
-              ctx.fill();
-          }
-
-          ctx.fillStyle = "yellow";
-          ctx.font = "Helvetica  16px";
-          ctx.fillText("|X-" + Math.round(canvas.px) + "|^" + N + " + |Y-"+Math.round(canvas.py)+"|^" + N + " = |" + Math.round(R) + "|^" + N, canvas.px - 125, canvas.py);
-          ctx.restore();
+    id: container
+    width: 320
+    height: 480
+
+    Column {
+        spacing: 6
+        anchors.fill: parent
+        anchors.topMargin: 12
+        Text {
+            font.pointSize: 24
+            font.bold: true
+            text: "Squircles"
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "#777"
         }
-    }
 
-    Rectangle {
-        id:controls
-        width:320
-        height:150
-        Column {
-          spacing:3
-          Slider {id:nCtrl; width:300; height:20; min:1; max:10; init:4; name:"N"}
-          Slider {id:rCtrl; width:300; height:20; min:30; max:180; init:100; name:"Radius"}
-          Slider {id:xCtrl; width:300; height:20; min:50; max:300; init:180; name:"X"}
-          Slider {id:yCtrl; width:300; height:20; min:30; max:300; init:220; name:"Y"}
-          Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
+        Image {
+            anchors.horizontalCenter: parent.horizontalCenter
+            source: "squircle.png"
+            width: 250
+            height: 25
         }
+
+        Canvas {
+            id: canvas
+            width: 320
+            height: 250
+            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: 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);
+                    else
+                        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();
+                if (canvas.stroke) {
+                    ctx.stroke();
+                }
+
+                if (canvas.fill) {
+                    ctx.fill();
+                }
+                ctx.restore();
+            }
+        }
+
+    }
+    Column {
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        Slider {id: nCtrl ; min: 1 ; max: 10 ; init: 2 ; name: "N"}
+        Slider {id: rCtrl ; min: 30 ; max: 180 ; init: 60 ; name: "Radius"}
     }
-  }
 }
diff --git a/examples/quick/canvas/tiger/tiger.qml b/examples/quick/canvas/tiger/tiger.qml
index 8b629eecf3..94a7d2dc3d 100644
--- a/examples/quick/canvas/tiger/tiger.qml
+++ b/examples/quick/canvas/tiger/tiger.qml
@@ -40,89 +40,95 @@
 
 import QtQuick 2.0
 import "../contents"
+import "../../shared"
 import "tiger.js" as Tiger
+
 Item {
-  id:container
-  width:320
-  height:480
+    id: container
+    width: 320
+    height: 480
 
-  Column {
-    spacing:5
-    anchors.fill:parent
-    Text { font.pointSize:15; text:"Tiger with SVG path"; anchors.horizontalCenter:parent.horizontalCenter}
+    Column {
+        spacing: 6
+        anchors.fill: parent
+        anchors.topMargin: 12
 
-    Canvas {
-        id:canvas
-        width:320
-        height:280
-        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 scaleX : scaleXCtrl.value
-        property real scaleY : scaleYCtrl.value
-        property real rotate : rotateCtrl.value
-        property int frame:0
+        Text {
+            font.pointSize: 24
+            font.bold: true
+            text: "Tiger with SVG path"
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: "#777"
+        }
 
-        onFillChanged: requestPaint();
-        onStrokeChanged: requestPaint();
-        onAlphaChanged: requestPaint();
-        onScaleXChanged: requestPaint();
-        onScaleYChanged: requestPaint();
-        onRotateChanged: requestPaint();
+        Canvas {
+            id: canvas
+            width: 320
+            height: 280
+            antialiasing: true
 
-        onPainted : {
-            canvas.frame++;
-            if (canvas.frame < Tiger.tiger.length)
-                requestPaint();
-        }
-        onPaint: {
-            var ctx = canvas.getContext('2d');
-            ctx.save();
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.globalAlpha = canvas.alpha;
-            ctx.scale(canvas.scaleX, canvas.scaleY);
-            ctx.rotate(canvas.rotate);
-            ctx.globalCompositeOperation = "source-over";
-            ctx.translate(canvas.width/2, canvas.height/2);
-            ctx.strokeStyle = Qt.rgba(.3, .3, .3,1);
-            ctx.lineWidth = 1;
+            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
 
-            //! [0]
-            for (var i = 0; i < canvas.frame && i < Tiger.tiger.length; i++) {
-                if (Tiger.tiger[i].width != undefined)
-                    ctx.lineWidth = Tiger.tiger[i].width;
+            onFillChanged: requestPaint();
+            onStrokeChanged: requestPaint();
+            onAlphaChanged: requestPaint();
+            onScaleChanged: requestPaint();
+            onRotateChanged: requestPaint();
 
-                if (Tiger.tiger[i].path != undefined)
-                    ctx.path = Tiger.tiger[i].path;
+            onPaint: {
+                var ctx = canvas.getContext('2d');
+                var originX = canvas.width/2 + 30
+                var originY = canvas.height/2 + 60
 
-                if (Tiger.tiger[i].fill != undefined) {
-                    ctx.fillStyle = Tiger.tiger[i].fill;
-                    ctx.fill();
-                }
+                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.translate(-originX, -originY)
 
-                if (Tiger.tiger[i].stroke != undefined) {
-                    ctx.strokeStyle = Tiger.tiger[i].stroke;
-                    ctx.stroke();
+                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;
+
+                    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].stroke != undefined) {
+                        ctx.strokeStyle = Tiger.tiger[i].stroke;
+                        ctx.stroke();
+                    }
                 }
+                //! [0]
+                ctx.restore();
             }
-            //! [0]
-            ctx.restore();
         }
     }
-    Rectangle {
-        id:controls
-        width:320
-        height:150
-        Column {
-          spacing:3
-          Slider {id:scaleXCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleX"}
-          Slider {id:scaleYCtrl; width:300; height:20; min:0.1; max:10; init:0.5; name:"ScaleY"}
-          Slider {id:rotateCtrl; width:300; height:20; min:0; max:Math.PI*2; init:0; name:"Rotate"}
-          Slider {id:alphaCtrl; width:300; height:20; min:0; max:1; init:1; name:"Alpha"}
-        }
+    Column {
+        id: controls
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 12
+        Slider {id: scaleCtrl ; min: 0.1 ; max: 1 ; init: 0.3 ; name: "Scale"}
+        Slider {id: rotateCtrl ; min: 0 ; max: Math.PI*2 ; init: 0 ; name: "Rotate"}
+        Slider {id: alphaCtrl ; min: 0 ; max: 1 ; init: 1 ; name: "Alpha"}
     }
-  }
 }
diff --git a/examples/quick/canvas/contents/Slider.qml b/examples/quick/shared/Slider.qml
index e0fed95ee8..d310a25bd5 100644
--- a/examples/quick/canvas/contents/Slider.qml
+++ b/examples/quick/shared/Slider.qml
@@ -42,73 +42,75 @@
 import QtQuick 2.0
 
 Item {
-    id:slider
-    property real min:0
-    property real max:1
-    property real value: min + (max - min) * (bar.x / (foo.width - bar.width))
-    property real init:min+(max-min)/2
-    property string name:"Slider"
+    id: slider
+    height: 26
+    width: 320
+
+    property real min: 0
+    property real max: 1
+    property real value: min + (max - min) * mousearea.value
+    property real init: min+(max-min)/2
+    property string name: "Slider"
+    property color color: "#0066cc"
 
     Component.onCompleted: setValue(init)
     function setValue(v) {
        if (min < max)
-          bar.x = v/(max - min) * (foo.width - bar.width);
+          handle.x = Math.round( v / (max - min) *
+                                (mousearea.drag.maximumX - mousearea.drag.minimumX)
+                                + mousearea.drag.minimumX);
     }
     Rectangle {
         id:sliderName
-        anchors.left:parent.left
+        anchors.left: parent.left
+        anchors.leftMargin: 16
         height: childrenRect.height
-        width:childrenRect.width
-        anchors.verticalCenter:parent.verticalCenter
+        width: Math.max(44, childrenRect.width)
+        anchors.verticalCenter: parent.verticalCenter
         Text {
-           text:slider.name
-           font.pointSize:12
-         }
+            text: slider.name + ":"
+            font.pointSize: 12
+            color: "#333"
+        }
     }
-    Item {
+
+    Rectangle{
         id: foo
-        height: 6
-        width: parent.width - 4 - sliderName.width
-        anchors.verticalCenter:parent.verticalCenter
-        anchors.left:sliderName.right
-        anchors.leftMargin:5
+        width: parent.width - 8 - sliderName.width
+        color: "#eee"
+        height: 7
+        radius: 3
+        antialiasing: true
+        border.color: Qt.darker(color, 1.2)
+        anchors.left: sliderName.right
+        anchors.right: parent.right
+        anchors.leftMargin: 10
+        anchors.rightMargin: 24
+        anchors.verticalCenter: parent.verticalCenter
+
         Rectangle {
             height: parent.height
             anchors.left: parent.left
-            anchors.right: bar.horizontalCenter
-            color: "blue"
+            anchors.right: handle.horizontalCenter
+            color: slider.color
             radius: 3
+            border.width: 1
+            border.color: Qt.darker(color, 1.3)
+            opacity: 0.8
         }
-        Rectangle {
-            height: parent.height
-            anchors.left: bar.horizontalCenter
-            anchors.right: parent.right
-            color: "gray"
-            radius: 3
-        }
-        Rectangle {
-            anchors.fill: parent
-            color: "transparent"
-            radius: 3
-            border.width: 2
-            border.color: "black"
-        }
-
-        Rectangle {
-            id: bar
-            y: -7
-            width: 20
-            height: 20
-            radius: 15
-            color: "white"
-            border.width: 2
-            border.color: "black"
+        Image {
+            id: handle
+            source: "images/slider_handle.png"
+            anchors.verticalCenter: parent.verticalCenter
             MouseArea {
+                id: mousearea
                 anchors.fill: parent
+                anchors.margins: -4
                 drag.target: parent
                 drag.axis: Drag.XAxis
-                drag.minimumX: 0
-                drag.maximumX: foo.width - parent.width
+                drag.minimumX: Math.round(-handle.width / 2 + 3)
+                drag.maximumX: Math.round(foo.width - handle.width/2 - 3)
+                property real value: (handle.x - drag.minimumX) / (drag.maximumX - drag.minimumX)
             }
         }
     }
diff --git a/examples/quick/shared/images/slider_handle.png b/examples/quick/shared/images/slider_handle.png
new file mode 100644
index 0000000000..63c518be7d
--- /dev/null
+++ b/examples/quick/shared/images/slider_handle.png
diff --git a/examples/quick/shared/qmldir b/examples/quick/shared/qmldir
index 2f1e56aefb..106654bbf0 100644
--- a/examples/quick/shared/qmldir
+++ b/examples/quick/shared/qmldir
@@ -1,3 +1,4 @@
 Button 2.0 Button.qml
 LauncherList 2.0 LauncherList.qml
 SimpleLauncherDelegate 2.0 SimpleLauncherDelegate.qml
+Slider 2.0 Slider.qml
diff --git a/examples/quick/shared/shared.qrc b/examples/quick/shared/shared.qrc
index 0c9f39e7b0..fba2d3eb82 100644
--- a/examples/quick/shared/shared.qrc
+++ b/examples/quick/shared/shared.qrc
@@ -3,6 +3,8 @@
         <file>LauncherList.qml</file>
         <file>SimpleLauncherDelegate.qml</file>
         <file>Button.qml</file>
+        <file>Slider.qml</file>
+        <file>images/slider_handle.png</file>
         <file>images/back.png</file>
         <file>images/next.png</file>
     </qresource>