Documentation: FAQ: drop shadow

site/user/tips.md

Index: site/user/tips.md
diff --git a/site/user/tips.md b/site/user/tips.md
index 91d1de597b03128928d4720968a8f789b7a58309..c8f8fb67fef532052d0dc8de5582cc64224b98b6 100644
--- a/site/user/tips.md
+++ b/site/user/tips.md
@@ -7,6 +7,7 @@ Tips & FAQ
 +   [How to add hardware acceleration in Skia](#hw-acceleration)
 +   [Does Skia support Font hinting?](#font-hinting)
 +   [Does Skia shape text (kerning)?](#kerning)
++   [How do I add drop shadow on text?](#text-shadow)
 
 * * *
 
@@ -166,4 +167,39 @@ text shaper. Skia's client's often use
 [HarfBuzz](http://www.freedesktop.org/wiki/Software/HarfBuzz/) to
 generate the glyphs and their positions, including kerning.
 
+* * *
+
+<span id="text-shadow"></span>
+
+How do I add drop shadow on text?
+---------------------------------
+
+<!--?prettify lang=cc?-->
+
+    void draw(SkCanvas* canvas) {
+        const char text[] = "Skia";
+        const SkScalar radius = 1.0f;
+        const SkScalar xDrop = 2.0f;
+        const SkScalar yDrop = 2.0f;
+        const SkScalar x = 4.0f;
+        const SkScalar y = 26.0f;
+        const SkScalar textSize = 24.0f;

[jcgregorio, 2016/04/25 16:46:23]

The resulting image is kind of small, can you increase the font size to 48?

[hal.canary, 2016/04/25 17:08:58]

Done.

+        const uint8_t blurAlpha = 127;
+        canvas->drawColor(SK_ColorWHITE);
+        SkPaint paint;
+        paint.setAntiAlias(true);
+        paint.setTextSize(textSize);
+        SkPaint blur(paint);
+        blur.setAlpha(blurAlpha);
+        blur.setMaskFilter(SkBlurMaskFilter::Make(
+            kNormal_SkBlurStyle,
+            SkBlurMaskFilter::ConvertRadiusToSigma(radius), 0));
+        canvas->drawText(text, strlen(text),
+                         x + xDrop, y + yDrop, blur);
+        canvas->drawText(text, strlen(text),
+                         x, y, paint);
+    }
+
+<a href='https://fiddle.skia.org/c/@text_shadow'><img src='https://fiddle.skia.org/i/@text_shadow_raster.png'></a>
+
 <div style="margin-bottom:99%"></div>