doc: embed fiddle

NOTRY=true
DOCS_PREVIEW= https://skia.org/user/api/skcanvas?cl=1149633009
DOCS_PREVIEW= https://skia.org/user/api/skpaint?cl=1149633009

Review URL: https://codereview.chromium.org/1149633009

2 files changed, 51 insertions, 20 deletions

diff --git a/site/user/api/skcanvas.md b/site/user/api/skcanvas.md
index 157409da38..98d7f7fbcc 100644
--- a/site/user/api/skcanvas.md
+++ b/site/user/api/skcanvas.md
@@ -19,13 +19,10 @@ heptagram.  This function can be cut and pasted into
         const SkScalar R = 0.45f * scale;
         const SkScalar TAU = 6.2831853f;
         SkPath path;
-        for (int i = 0; i < 7; ++i) {
+        path.moveTo(R, 0.0f);
+        for (int i = 1; i < 7; ++i) {
             SkScalar theta = 3 * i * TAU / 7;
-            if (i == 0) {
-                path.moveTo(R * cos(theta), R * sin(theta));
-            } else {
-                path.lineTo(R * cos(theta), R * sin(theta));
-            }
+            path.lineTo(R * cos(theta), R * sin(theta));
         }
         path.close();
         SkPaint p;
@@ -35,6 +32,9 @@ heptagram.  This function can be cut and pasted into
         canvas->drawPath(path, p);
     }
 
+<a href="https://fiddle.skia.org/c/d7b4ccb6d6281b68a274a72b187fc450">
+<img src="https://fiddle.skia.org/i/d7b4ccb6d6281b68a274a72b187fc450_raster.png"></a>
+
 Details
 -------
 
@@ -57,6 +57,9 @@ SkPaint.
         canvas->restore();
     }
 
+<a href="https://fiddle.skia.org/c/71f2e87df2be1cdbc44139ee3e2790eb">
+<img src="https://fiddle.skia.org/i/71f2e87df2be1cdbc44139ee3e2790eb_raster.png"></a>
+
 The code above will draw a rectangle rotated by 45 degrees. Exactly
 what color and style the rect will be drawn in is described by the
 paint, not the canvas.
@@ -93,10 +96,15 @@ parameter.
 
 <!--?prettify lang=cc?-->
 
+    SkBitmap source;
+
     void draw(SkCanvas* canvas) {
+        canvas->drawColor(SK_ColorWHITE);
+
         SkPaint paint;
         paint.setStyle(SkPaint::kStroke_Style);
-        paint.setStrokeWidth(2);
+        paint.setStrokeWidth(4);
+        paint.setColor(SK_ColorRED);
 
         SkRect rect = SkRect::MakeXYWH(50, 50, 40, 60);
         canvas->drawRect(rect, paint);
@@ -104,15 +112,19 @@ parameter.
         SkRRect oval;
         oval.setOval(rect);
         oval.offset(40, 60);
+        paint.setColor(SK_ColorBLUE);
         canvas->drawRRect(oval, paint);
 
+        paint.setColor(SK_ColorCYAN);
         canvas->drawCircle(180, 50, 25, paint);
 
         rect.offset(80, 0);
+        paint.setColor(SK_ColorYELLOW);
         canvas->drawRoundRect(rect, 10, 10, paint);
 
         SkPath path;
         path.cubicTo(768, 0, -512, 256, 256, 256);
+        paint.setColor(SK_ColorGREEN);
         canvas->drawPath(path, paint);
 
         canvas->drawBitmap(source, 128, 128, &paint);
@@ -125,6 +137,9 @@ parameter.
         canvas->drawText(text, strlen(text), 50, 25, paint2);
     }
 
+<a href="https://fiddle.skia.org/c/35b614d41e60289461d658a9d509e28d">
+<img src="https://fiddle.skia.org/i/35b614d41e60289461d658a9d509e28d_raster.png"></a>
+
 In some of the calls, we pass a pointer, rather than a reference, to
 the paint. In those instances, the paint parameter may be null. In all
 other cases the paint parameter is required.
diff --git a/site/user/api/skpaint.md b/site/user/api/skpaint.md
index fdee783d4b..1160df08d3 100644
--- a/site/user/api/skpaint.md
+++ b/site/user/api/skpaint.md
@@ -20,19 +20,35 @@ of matrix and clip settings.
 
 <!--?prettify lang=cc?-->
 
-    SkPaint paint1, paint2, paint3;
-
-    paint1.setColor(0xFFFF0000:
-    paint1.setStyle(SkPaint::kFill_Style);
-
-    paint2.setColor(0x8000FF00);
-    paint2.setStyle(SkPaint::kStroke_Style);
-    paint2.setStrokeWidth(SkIntToScalar(3));
-
-    paint3.setColor(0xFF888888);
-    paint3.setTextSize(SkIntToScalar(24));
-    paint3.setTextScaleX(SkFloatToScalar(0.75f));
-
+    void draw(SkCanvas* canvas) {
+        canvas->clear(SK_ColorWHITE);
+
+        SkPaint paint1, paint2, paint3;
+
+        paint1.setTextSize(64.0f);
+        paint1.setAntiAlias(true);
+        paint1.setColor(0xFFFF0000);
+        paint1.setStyle(SkPaint::kFill_Style);
+
+        paint2.setTextSize(64.f);
+        paint2.setAntiAlias(true);
+        paint2.setColor(0xFF008800);
+        paint2.setStyle(SkPaint::kStroke_Style);
+        paint2.setStrokeWidth(SkIntToScalar(3));
+
+        paint3.setTextSize(64.0f);
+        paint3.setAntiAlias(true);
+        paint3.setColor(0xFF888888);
+        paint3.setTextScaleX(SkFloatToScalar(1.5f));
+
+        const char text[] = "Skia!";
+        canvas->drawText(text, strlen(text), 20.0f, 64.0f,  paint1);
+        canvas->drawText(text, strlen(text), 20.0f, 144.0f, paint2);
+        canvas->drawText(text, strlen(text), 20.0f, 224.0f, paint3);
+    }
+
+<a href="https://fiddle.skia.org/c/b8e7991ede1ca88e5458aa1f0039caf9">
+<img src="https://fiddle.skia.org/i/b8e7991ede1ca88e5458aa1f0039caf9_raster.png"></a>
 
 This shows three different paints, each setup to draw in a different
 style. Now the caller can intermix these paints freely, either using