[canvaskit] Expand canvas2d API

Made addPath take one more arg to allow for append/expand
(which makes emulating the HTML canvas easier).

Add Gold test for various lineTo/pathTo, etc.

Make CanvasKit.Color() choose a better value for alpha
when omitted (was 0, should be 1).

Add some parsing logic to deal with colors/font sizes.
Fonts are going to be rather complex it seems.

Moves some arc-related logic to the JS side, (although
this should preserve the behavior of CanvasKit.arc() to
behave like the Canvas implementation)

Make Examples and tests to a side-by-side comparison to
HTML canvas where applicable.

Add a Changelog for PathKit.  There was a bug (I thought), but
turns out I was wrong.  The Changelog will be for future
bug fixes.

Bug: skia:
Change-Id: I1bd603fdb518232604b098e24543e3453015b504
Reviewed-on: https://skia-review.googlesource.com/c/170446
Reviewed-by: Kevin Lubick <kjlubick@google.com>

3 files changed, 35 insertions, 15 deletions

diff --git a/modules/pathkit/CHANGELOG.md b/modules/pathkit/CHANGELOG.md
new file mode 100644
index 0000000000..4ea69d1f8b
--- /dev/null
+++ b/modules/pathkit/CHANGELOG.md
@@ -0,0 +1,15 @@
+
+
+Trunk
+-----
+
+New Features:
+
+
+Bug Fixes:
+
+
+v0.4.2: 2018-11-07
+------------------
+
+Beginning of changelog.
diff --git a/modules/pathkit/chaining.js b/modules/pathkit/chaining.js
index f901d38625..c181e44f8d 100644
--- a/modules/pathkit/chaining.js
+++ b/modules/pathkit/chaining.js
@@ -12,11 +12,12 @@
       //   - an SVGMatrix
       //   - the 6 parameters of an SVG Matrix
       //   - the 9 parameters of a full Matrix
+      var path = arguments[0];
       if (arguments.length === 1) {
-        // Add path, unchanged.  Use identify matrix
-        this._addPath(arguments[0], 1, 0, 0,
-                                    0, 1, 0,
-                                    0, 0, 1);
+        // Add path, unchanged.  Use identity matrix
+        this._addPath(path, 1, 0, 0,
+                            0, 1, 0,
+                            0, 0, 1);
       } else if (arguments.length === 2) {
         // Takes SVGMatrix, which has its args in a counter-intuitive order
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Transform_functions
@@ -24,22 +25,22 @@
          * @type {SVGMatrix}
          */
         var sm = arguments[1];
-        this._addPath(arguments[0], sm.a, sm.c, sm.e,
-                                    sm.b, sm.d, sm.f,
-                                    0,    0,    1);
+        this._addPath(path, sm.a, sm.c, sm.e,
+                            sm.b, sm.d, sm.f,
+                               0,    0,    1);
       } else if (arguments.length === 7) {
         // User provided the 6 params for an SVGMatrix directly.
         var a = arguments;
-        this._addPath(arguments[0], a[1], a[3], a[5],
-                                    a[2], a[4], a[6],
-                                    0,     0,     1);
+        this._addPath(path, a[1], a[3], a[5],
+                            a[2], a[4], a[6],
+                              0 ,   0 ,   1 );
       } else if (arguments.length === 10) {
         // User provided the 9 params of a (full) matrix directly.
         // These are in the same order as what Skia expects.
         var a = arguments;
-        this._addPath(arguments[0], a[1], a[2], a[3],
-                                    a[4], a[5], a[6],
-                                    a[7], a[8], a[9]);
+        this._addPath(path, a[1], a[2], a[3],
+                            a[4], a[5], a[6],
+                            a[7], a[8], a[9]);
       } else {
         console.err('addPath expected to take 1, 2, 7, or 10 args. Got ' + arguments.length);
         return null;
diff --git a/modules/pathkit/tests/testReporter.js b/modules/pathkit/tests/testReporter.js
index 3879ec1b7b..530b712017 100644
--- a/modules/pathkit/tests/testReporter.js
+++ b/modules/pathkit/tests/testReporter.js
@@ -3,9 +3,9 @@ const REPORT_URL = 'http://localhost:8081/report_gold_data'
 // Typically used for debugging.
 const fail_on_no_gold = false;
 
-function reportCanvas(canvas, testname) {
+function reportCanvas(canvas, testname, outputType='canvas') {
     let b64 = canvas.toDataURL('image/png');
-    return _report(b64, 'canvas', testname);
+    return _report(b64, outputType, testname);
 }
 
 function reportSVG(svg, testname) {
@@ -71,6 +71,8 @@ function reportPath(path, testname, done) {
             }).catch(reportError(done));
 }
 
+// data is a base64 encoded png, outputType is the value that goes with the
+// key 'config' when reporting.
 function _report(data, outputType, testname) {
     return fetch(REPORT_URL, {
         method: 'POST',
@@ -116,6 +118,8 @@ function catchException(done, fn) {
             fn()
         } catch (e) {
             console.log('Failed with the following error', e);
+            expect(e).toBeFalsy();
+            debugger;
             done();
         }
         // We don't call done with finally because