update canvas example

Change-Id: I901532eafabc0344f3978c0093ee56ed230c74b0

2 files changed, 33 insertions, 22 deletions

diff --git a/examples/declarative/canvas/svgpath/tiger.js b/examples/declarative/canvas/svgpath/tiger.js
index a3d79c9098..63a1e43cba 100644
--- a/examples/declarative/canvas/svgpath/tiger.js
+++ b/examples/declarative/canvas/svgpath/tiger.js
@@ -728,15 +728,19 @@ function draw(ctx, frame)
 
   if (frame > totalPaths)
     return;
-  
-  ctx.globalCompositeOperation = "source-over";
-  ctx.clearRect(0, 0, 800, 800);
-
-  ctx.strokeColor = Qt.rgba(133, 133, 133,1);
-  ctx.lineWidth = 1;
+   console.log(frame);
+   ctx.reset();
+   ctx.globalCompositeOperation = "source-over";
+   ctx.fillStyle = "rgba(0,0,0,0)";
+   //ctx.fillRect(0, 0, 600, 600);
+   ctx.fillRect(0, 0, 1900, 1200);
 
+   ctx.strokeColor = Qt.rgba(133, 133, 133,1);
+   ctx.lineWidth = 1;
+   //ctx.translate(200, 200);
+   ctx.translate(750, 350);
+   ctx.scale(2,2); 
   for (var i = 0; i < frame; i++) {
-  console.log("draw frame:" + i + " fill:" + tiger[i].fill + " stroke:" + tiger[i].stroke + " path:" + tiger[i].path + " width:" + tiger[i].width); 
     if (tiger[i].width != undefined)
       ctx.lineWidth = tiger[i].width;
 
@@ -748,12 +752,11 @@ function draw(ctx, frame)
       ctx.fill();
     }
 
-    //if (tiger[i].stroke != undefined) {
-    //  ctx.strokeStyle = tiger[i].stroke;
+    if (tiger[i].stroke != undefined) {
+      ctx.strokeStyle = tiger[i].stroke;
       ctx.stroke();
-   // }
-
-  }
+    }
+ }
 }
 
 
diff --git a/examples/declarative/canvas/svgpath/tiger.qml b/examples/declarative/canvas/svgpath/tiger.qml
index 440e81ef30..052c090708 100644
--- a/examples/declarative/canvas/svgpath/tiger.qml
+++ b/examples/declarative/canvas/svgpath/tiger.qml
@@ -3,23 +3,31 @@ import "tiger.js" as Tiger
 
 Canvas {
   id:canvas
-  width:800
-  height:800
+  width:1900
+  height:1150
   property int frame:0    
 
   Timer {
     repeat:true
-    interval:10
+    interval:100
     running:true
     onTriggered: {
-      frame++;
-      if (frame > Tiger.tiger.length)
-        frame = 0;
-      Tiger.draw(canvas.getContext(), canvas.frame);
+      canvas.frame++;
+      if (canvas.frame > Tiger.tiger.length) {
+        canvas.frame = 0;
+      } else {
+        Tiger.draw(canvas.getContext(), canvas.frame);
+      }
     }
   }
-
-  /*onDrawRegion:{
+/*
+  onDrawRegion:{
     Tiger.draw(context, canvas.frame);
-  }*/
+  }
+Text {
+  anchors.top : parent.top
+  font.pixelSize : 30
+  text: "drawing path:" + canvas.frame + "/" + Tiger.tiger.length;
+}
+*/
 }