Expound on canvas example documentation

Change-Id: I5bf82697dcbadaa9dc58e11ee22b2ab8c1a28852
Reviewed-by: Yunqiao Yin <charles.yin@nokia.com>

examples/quick/canvas/bezierCurve/bezierCurve.qml

@@ -90,6 +90,7 @@ Item {
       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);
@@ -99,6 +100,7 @@ Item {
       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)

examples/quick/canvas/canvas.qml

@@ -51,9 +51,12 @@ import "../../shared" as Examples
     a small QML file emphasizing a particular element or feature.
 
     Red heart demonstrates using a bezierCurve API to stroke and fill a red heart.
+    \snippet examples/quick/canvas/bezierCurve/bezierCurve.qml 0
 
-    Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble,
+    Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble:
-    this example also demonstrates the fillText API.
+    \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 0
+    This example also demonstrates the fillText API:
+    \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 1
 
     Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle.
 
@@ -62,8 +65,10 @@ import "../../shared" as Examples
     Smile face demonstrates using several complex path APIs to draw an fill a smile face.
 
     Clip demonstrates using clip API to clip a given image.
+    \snippet examples/quick/canvas/clip/clip.qml 0
 
     Tiger demonstrates using SVG path API to draw a tiger with a collection of SVG path strings.
+    \snippet examples/quick/canvas/tiger/tiger.qml 0
 
 */
 

examples/quick/canvas/clip/clip.qml

@@ -126,9 +126,11 @@ Item {
       if (canvas.fill) {
           ctx.fill();
       }
+      //! [0]
       ctx.clip();
 
       ctx.drawImage(canvas.imagefile, 0, 0);
+      //! [0]
       ctx.restore();
     }
   }

examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml

@@ -88,6 +88,7 @@ Item {
           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);
@@ -97,16 +98,19 @@ Item {
           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();
 
 
+          // ![1]
           ctx.fillStyle="green";
           ctx.font = "Bold 15px";
 
           ctx.fillText("QML酷毙了", 30, 60);
+          // ![1]
           ctx.restore();
       }
     }

examples/quick/canvas/tiger/tiger.qml

@@ -92,7 +92,7 @@ Item {
             ctx.strokeStyle = Qt.rgba(.3, .3, .3,1);
             ctx.lineWidth = 1;
 
-
+            //! [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;
@@ -110,6 +110,7 @@ Item {
                     ctx.stroke();
                 }
             }
+            //! [0]
             ctx.restore();
         }
     }