doc: embed fiddle

site/user/api/skpaint.md

 SkPaint
 =======
 
 *color, stroke, font, effects*
 
 <!-- Updated Jan 17, 2013 by humper@google.com -->
 
 Anytime you draw something in Skia, and want to specify what color it
 is, or how it blends with the background, or what style or font to
 draw it in, you specify those attributes in a paint.
 
 Unlike `SkCanvas`, paints do not maintain an internal stack of state
 (i.e. there is no save/restore on a paint). However, paints are
 relatively light-weight, so the client may create and maintain any
 number of paint objects, each setup for a particular use. Factoring
 all of these color and stylistic attribute out of the canvas state,
 and into (multiple) paint objects, allows canvas' save/restore to be
 that much more efficient, as all they have to do is maintain the stack
 of matrix and clip settings.
 
 <!--?prettify lang=cc?-->
 
-    SkPaint paint1, paint2, paint3;
+    void draw(SkCanvas* canvas) {
+        canvas->clear(SK_ColorWHITE);
 
-    paint1.setColor(0xFFFF0000:
-    paint1.setStyle(SkPaint::kFill_Style);
+        SkPaint paint1, paint2, paint3;
 
-    paint2.setColor(0x8000FF00);
-    paint2.setStyle(SkPaint::kStroke_Style);
-    paint2.setStrokeWidth(SkIntToScalar(3));
+        paint1.setTextSize(64.0f);
+        paint1.setAntiAlias(true);
+        paint1.setColor(0xFFFF0000);
+        paint1.setStyle(SkPaint::kFill_Style);
 
-    paint3.setColor(0xFF888888);
-    paint3.setTextSize(SkIntToScalar(24));
-    paint3.setTextScaleX(SkFloatToScalar(0.75f));
+        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
 them as is, or modifying them as the drawing proceeds.
 
 <!--?prettify lang=cc?-->
 
     canvas->drawRect(..., paint1);
     canvas->drawRect(..., paint2);
 
@@ skipping 47 matching lines @@
 a specific font style, to be used for measuring and drawing
 text. Speaking of which, paints are used not only for drawing text,
 but also for measuring it.
 
 <!--?prettify lang=cc?-->
 
     paint.measureText(...);
     paint.getTextBounds(...);
     paint.textToGlyphs(...);
     paint.getFontMetrics(...);