doc: more changes

NOTRY=true
DOCS_PREVIEW= https://skia.org/user/api/skcanvas?cl=1228063002
DOCS_PREVIEW= https://skia.org/user/tips?cl=1228063002
TBR=

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

diff --git a/site/user/api/skcanvas.md b/site/user/api/skcanvas.md
index 98d7f7f..5750814 100644 (file)
--- a/site/user/api/skcanvas.md
+++ b/site/user/api/skcanvas.md
@@ -50,15 +50,17 @@ SkPaint.
 
     void draw(SkCanvas* canvas) {
         canvas->save();
+        canvas->translate(SkIntToScalar(128), SkIntToScalar(128));
         canvas->rotate(SkIntToScalar(45));
-        SkRect rect = SkRect::MakeXYWH(150, -50, 100, 100);
+        SkRect rect = SkRect::MakeXYWH(-90.5f, -90.5f, 181.0f, 181.0f);
         SkPaint paint;
+        paint.setColor(SK_ColorBLUE);
         canvas->drawRect(rect, paint);
         canvas->restore();
     }
 
-<a href="https://fiddle.skia.org/c/71f2e87df2be1cdbc44139ee3e2790eb">
-<img src="https://fiddle.skia.org/i/71f2e87df2be1cdbc44139ee3e2790eb_raster.png"></a>
+<a href="https://fiddle.skia.org/c/6af99894b40ea1331f6a79d55a4cbfd7">
+<img src="https://fiddle.skia.org/i/6af99894b40ea1331f6a79d55a4cbfd7_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

diff --git a/site/user/tips.md b/site/user/tips.md
index 9b86bf1..6357c80 100644 (file)
--- a/site/user/tips.md
+++ b/site/user/tips.md
@@ -4,6 +4,8 @@ Tips & FAQ
 Tips and Tricks
 ---------------
 
+<span id="bitmap-subsetting"></span>
+
 ### Bitmap Subsetting
 
 Taking a subset of a bitmap is effectively free - no pixels are copied or
@@ -16,32 +18,43 @@ drawBitmapNine():
     bitmap.extractSubset(&subset, rect);
     canvas->drawBitmapNine(subset, ...);
 
+* * *
+
+<span id="skp-capture"></span>
+
 ### Capturing a `.skp` file on a web page in Chromium.
 
+
 1.  Launch Chrome or Chromium with `--no-sandbox --enable-gpu-benchmarking`
 2.  Open the JS console (ctrl-shift-J)
 3.  Execute: `chrome.gpuBenchmarking.printToSkPicture('/tmp')`
     This returns "undefined" on success.
 
-Open the resulting file in the Skia Debugger:
+Open the resulting file in the Skia Debugger, rasterize it with `dm`,
+or use Skia's `SampleApp` to view it:
+
+<!--?prettify lang=sh?-->
 
     bin/sync-and-gyp
-    ninja -C out/Release debugger
+    ninja -C out/Release debugger dm SampleApp
     out/Release/debugger /tmp/layer_0.skp &
 
-Or use `dm` to rasterize it.
-
-    bin/sync-and-gyp
-    ninja -C out/Release dm
     out/Release/dm --src skp --skps /tmp/layer_0.skp -w /tmp \
         --config 8888 gpu pdf --verbose
     ls -l /tmp/*/skp/layer_0.skp.*
 
+    out/Release/SampleApp --picture /tmp/layer_0.skp
+    # On MacOS, SampleApp is a bundle:
+    open out/Release/SampleApp.app --args --picture /tmp/layer_0.skp
+
+* * *
+
 FAQ
 ---
 
-### Does Skia support HW acceleration?
+<span id="hw-acceleration"></span>
 
+### Does Skia support HW acceleration?
 
 There are two ways Skia can take advantage of HW.
 
@@ -57,6 +70,10 @@ There are sets of bottleneck routines inside the blits of Skia that can be
 replace on a platform in order to take advantage of specific CPU features. One
 such example is the NEON SIMD instructions on ARM v7 devices. See src/opts/
 
+* * *
+
+<span id="font-hinting"></span>
+
 ### Does Skia support Font hinting?
 
 Skia has a built-in font cache, but it does not know how to actual render font