Documentation: FAQ: drop shadow

site/user/tips.md

 Tips & FAQ
 ==========
 
 +   [Gyp Options](#gypdefines)
 +   [Bitmap Subsetting](#bitmap-subsetting)
 +   [Capture a `.skp` file on a web page in Chromium](#skp-capture)
 +   [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)
 
 * * *
 
 <span id="gypdefines"></span>
 
 Gyp Options
 -----------
 
 When running `sync-and-gyp`, the `GYP_DEFINES` environment variable can
 be used to change Skia’s compile-time settings, using a
@@ skipping 139 matching lines @@
 <span id="kerning"></span>
 
 Does Skia shape text (kerning)?
 -------------------------------
 
 No.  Skia provides interfaces to draw glyphs, but does not implement a
 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>