[canvaskit] Define requestAnimationFrame and other definition fixes.

Change-Id: I28a908fb680d704bf730a5968691f54d4a9e0a68
Bug: skia:12555 skia:12550
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/462056
Reviewed-by: Leandro Lovisolo <lovisolo@google.com>

modules/canvaskit/CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Type Changes (index.d.ts)
+ - `Surface.requestAnimationFrame` and `Surface.drawOnce` are properly documented.
+ - Fixed typo in TextStyle (decrationStyle => decorationStyle)
+
 ## [0.30.0] - 2021-09-15
 
 ### Removed

modules/canvaskit/npm_build/types/canvaskit-wasm-tests.ts

@@ -545,6 +545,7 @@ function paragraphBuilderTests(CK: CanvasKit, fontMgr?: FontMgr, paint?: Paint)
         color: CK.Color(48, 37, 199),
         fontFamilies: ['Noto Serif'],
         decoration: CK.LineThroughDecoration,
+        decorationStyle: CK.DecorationStyle.Dashed,
         decorationThickness: 1.5, // multiplier based on font size
         fontSize: 24,
         fontFeatures: [{name: 'smcp', value: 1}],
@@ -881,6 +882,12 @@ function surfaceTests(CK: CanvasKit, gl?: WebGLRenderingContext) {
         alphaType: CK.AlphaType.Premul,
         colorSpace: CK.ColorSpace.SRGB,
     });
+
+    const drawFrame = (canvas: Canvas) => {
+        canvas.clear([0, 0, 0, 0]);
+    };
+    surfaceFour.requestAnimationFrame(drawFrame);
+    surfaceFour.drawOnce(drawFrame);
 }
 
 function textBlobTests(CK: CanvasKit, font?: Font, path?: Path) {

modules/canvaskit/npm_build/types/index.d.ts

@@ -2576,6 +2576,16 @@ export interface RuntimeEffect extends EmbindObject<RuntimeEffect> {
 export type Shader = EmbindObject<Shader>;
 
 export interface Surface extends EmbindObject<Surface> {
+    /**
+     * A convenient way to draw exactly once on the canvas associated with this surface.
+     * This requires an environment where a global function called requestAnimationFrame is
+     * available (e.g. on the web, not on Node). Users do not need to flush the surface,
+     * or delete/dispose of it as that is taken care of automatically with this wrapper.
+     *
+     * Node users should call getCanvas() and work with that canvas directly.
+     */
+    drawOnce(drawFrame: (_: Canvas) => void): void;
+
     /**
      * Clean up the surface and any extra memory.
      * [Deprecated]: In the future, calls to delete() will be sufficient to clean up the memory.
@@ -2644,6 +2654,19 @@ export interface Surface extends EmbindObject<Surface> {
      */
     reportBackendTypeIsGPU(): boolean;
 
+    /**
+     * A convenient way to draw multiple frames on the canvas associated with this surface.
+     * This requires an environment where a global function called requestAnimationFrame is
+     * available (e.g. on the web, not on Node). Users do not need to flush the surface,
+     * as that is taken care of automatically with this wrapper.
+     *
+     * Users should probably call surface.requestAnimationFrame in the callback function to
+     * draw multiple frames, e.g. of an animation.
+     *
+     * Node users should call getCanvas() and work with that canvas directly.
+     */
+    requestAnimationFrame(drawFrame: (_: Canvas) => void): void;
+
     /**
      * If this surface is GPU-backed, return the sample count of the surface.
      */
@@ -2785,7 +2808,7 @@ export interface TextStyle {
     decoration?: number;
     decorationColor?: InputColor;
     decorationThickness?: number;
-    decrationStyle?: DecorationStyle;
+    decorationStyle?: DecorationStyle;
     fontFamilies?: string[];
     fontFeatures?: TextFontFeatures[];
     fontSize?: number;