1 files changed, 87 insertions, 0 deletions
diff --git a/examples/declarative/canvas/smile/smile.qml b/examples/declarative/canvas/smile/smile.qml
new file mode 100644
index 0000000000..aff7cd00aa
--- /dev/null
+++ b/examples/declarative/canvas/smile/smile.qml
@@ -0,0 +1,87 @@
+import QtQuick 2.0
+import "../contents"
+Item {
+  id:container
+  width:360
+  height:600
+
+  Column {
+    spacing:5
+    anchors.fill:parent
+    Text { font.pointSize:25; text:"Smile with arcs"; anchors.horizontalCenter:parent.horizontalCenter}
+
+    Canvas {
+        id:canvas
+        width:360
+        height:360
+        smooth:true
+        renderTarget:Canvas.Image
+        threadRendering:false
+
+        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
+
+        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} }
+
+    onPaint: {
+          var ctx = canvas.getContext('2d');
+          ctx.reset();
+          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();
+        }
+    }
+
+    Rectangle {
+        id:controls
+        width:360
+        height:160
+        Column {
+          spacing:3
+          Slider {id:lineWidthCtrl; width:300; height:30; min:1; max:10; init:2; name:"Line width"}
+          Slider {id:scaleXCtrl; width:300; height:30; min:0.1; max:10; init:1; name:"ScaleX"}
+          Slider {id:scaleYCtrl; width:300; height:30; min:0.1; max:10; init:1; name:"ScaleY"}
+          Slider {id:rotateCtrl; width:300; height:30; min:0; max:Math.PI*2; init:0; name:"Rotate"}
+          Slider {id:alphaCtrl; width:300; height:30; min:0; max:1; init:1; name:"Alpha"}
+        }
+    }
+  }
+}