Update example

2 files changed, 20 insertions, 12 deletions

diff --git a/examples/painting/Drawing.qml b/examples/painting/Drawing.qml
index a19da45..f0f39a2 100644
--- a/examples/painting/Drawing.qml
+++ b/examples/painting/Drawing.qml
@@ -10,6 +10,7 @@ Canvas {
     property int count: 0
     property int lineWidth: 2
     property variant drawColor: "black"
+    property variant ctx: getContext("2d");
 
     MouseArea {
         id:mousearea
@@ -25,8 +26,6 @@ Canvas {
     }
 
     function drawLineSegment() {
-        var ctx = getContext();
-        ctx.save();
         ctx.beginPath();
         ctx.strokeStyle = drawColor
         ctx.lineWidth = lineWidth
@@ -34,20 +33,15 @@ Canvas {
         ctx.lineTo(mousearea.mouseX, mousearea.mouseY);
         ctx.stroke();
         ctx.closePath();
-        ctx.restore();
     }
 
     function drawPoint() {
-        var ctx = getContext();
-        ctx.save();
         ctx.lineWidth = lineWidth
         ctx.fillStyle = drawColor
         ctx.fillRect(mousearea.mouseX, mousearea.mouseY, 2, 2);
-        ctx.restore();
     }
 
     function clear() {
-        var ctx = getContext();
         ctx.clearRect(0, 0, width, height);
     }
 }
diff --git a/examples/painting/painting.qml b/examples/painting/painting.qml
index d691834..9aa8ee4 100644
--- a/examples/painting/painting.qml
+++ b/examples/painting/painting.qml
@@ -39,6 +39,7 @@ Rectangle {
             anchors.fill: parent
             delegate: idelegate
             model: model
+            cacheBuffer: 20
         }
     }
 
@@ -49,12 +50,25 @@ Rectangle {
             width:120
             height:142
             anchors.horizontalCenter: parent.horizontalCenter
-            Image {
+            Canvas {
+                width: 140
+                height: 140
+                canvasWidth:width
+                canvasHeight:height
+                color: "#222"
                 smooth:true
-                width:140
                 fillMode: Image.PreserveAspectFit
                 anchors.centerIn: parent
-                source: src
+                onInit: {
+                    var ctx = getContext("2d");
+                    // Here we copy contents from drawing and apply drop shaddow
+                    var img = canvas.toImage();
+                    ctx.shadowOffsetX = 4;
+                    ctx.shadowOffsetY = 4;
+                    ctx.shadowBlur    = 20;
+                    ctx.shadowColor   = "red";
+                    ctx.drawImage(img, 25, 25, width-50, height-50);
+                }
             }
             ListView.onAdd:NumberAnimation{target: root; property: "opacity" ; from:0; to:1; duration:500}
         }
@@ -94,8 +108,8 @@ Rectangle {
         MouseArea {
             anchors.fill:parent
             onClicked: {
-                var name = "canvas" + canvas.count++ +".png";
-                canvas.save("examples/painting/"+name);
+                var name = "canvas" + (++canvas.count) +".png";
+                canvas.save(name);
                 model.append({src:name});
                 view.currentIndex = model.count-1
             }