[canvaskit] Add debug-mode only logs

And a fix for node.

Docs-Preview: https://skia.org/?cl=172143
Bug: skia:
Change-Id: I519c2693b386aa68655f235281d932ee5fffbc61
Reviewed-on: https://skia-review.googlesource.com/c/172143
Reviewed-by: Kevin Lubick <kjlubick@google.com>

experimental/canvaskit/canvaskit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvaskit-wasm",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A WASM version of Skia's Canvas API",
   "main": "bin/canvaskit.js",
   "homepage": "https://github.com/google/skia/tree/master/experimental/canvaskit",

experimental/canvaskit/compile.sh

@@ -20,12 +20,13 @@ source $EMSDK/emsdk_env.sh
 EMCC=`which emcc`
 EMCXX=`which em++`
 
-RELEASE_CONF="-Oz --closure 1 --llvm-lto 3 -DSK_RELEASE"
+RELEASE_CONF="-Oz --closure 1 --llvm-lto 3 -DSK_RELEASE --pre-js $BASE_DIR/release.js"
 EXTRA_CFLAGS="\"-DSK_RELEASE\""
 if [[ $@ == *debug* ]]; then
   echo "Building a Debug build"
   EXTRA_CFLAGS="\"-DSK_DEBUG\""
-  RELEASE_CONF="-O0 --js-opts 0 -s DEMANGLE_SUPPORT=1 -s ASSERTIONS=1 -s GL_ASSERTIONS=1 -g3 -DPATHKIT_TESTING -DSK_DEBUG"
+  RELEASE_CONF="-O0 --js-opts 0 -s DEMANGLE_SUPPORT=1 -s ASSERTIONS=1 -s GL_ASSERTIONS=1 -g3 \
+                -DPATHKIT_TESTING -DSK_DEBUG --pre-js $BASE_DIR/debug.js"
   BUILD_DIR=${BUILD_DIR:="out/canvaskit_wasm_debug"}
 else
   BUILD_DIR=${BUILD_DIR:="out/canvaskit_wasm"}

experimental/canvaskit/cpu.js

@@ -47,7 +47,7 @@
       if (this._canvas) {
         var success = this._readPixels(this._width, this._height, this._pixelPtr);
         if (!success) {
-          console.err('could not read pixels');
+          SkDebug('could not read pixels');
           return;
         }
 

experimental/canvaskit/debug.js

@@ -0,0 +1,3 @@
+function SkDebug(msg) {
+  console.warn(msg);
+}

experimental/canvaskit/externs.js

@@ -259,4 +259,4 @@ StrokeOpts.prototype.cap;
 StrokeOpts.prototype.join;
 
 // Not sure why this is needed - might be a bug in emsdk that this isn't properly declared.
-function loadWebAssemblyModule() {}
+function loadWebAssemblyModule() {};

experimental/canvaskit/gpu.js

@@ -12,7 +12,7 @@
         // https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html
         var surface = this._getWebGLSurface(htmlID, canvas.width, canvas.height);
         if (!surface) {
-          console.log('falling back from GPU implementation to a SW based one');
+          SkDebug('falling back from GPU implementation to a SW based one');
           return CanvasKit.MakeSWCanvasSurface(htmlID);
         }
         return surface;

experimental/canvaskit/helper.js

@@ -17,4 +17,4 @@
     }
     return (clamp(a*255) << 24) | (clamp(r) << 16) | (clamp(g) << 8) | (clamp(b) << 0);
   }
-}(Module)); // When this file is loaded in, the high level object is "Module";
+}(Module)); // When this file is loaded in, the high level object is "Module";

experimental/canvaskit/htmlcanvas/canvas2d.js

@@ -4,7 +4,10 @@
 // SkCanvas).
 (function(CanvasKit) {
 
-  var isNode = typeof btoa === undefined;
+  // See https://stackoverflow.com/a/31090240
+  // This contraption keeps closure from minifying away the check
+  // if btoa is defined *and* prevents runtime "btoa" or "window" is not defined.
+  var isNode = !(new Function("try {return this===window;}catch(e){ return false;}")());
 
   function argsAreFinite(args) {
     for (var i = 0; i < args.length; i++) {
@@ -15,6 +18,14 @@
     return true;
   }
 
+  function toBase64String(bytes) {
+    if (isNode) {
+      return Buffer.from(bytes).toString('base64');
+    } else {
+      return btoa(String.fromCharCode.apply(null, bytes));
+    }
+  }
+
   CanvasKit._testing = {};
 
   function HTMLCanvas(skSurface) {
@@ -36,23 +47,17 @@
 
       var img = this._surface.makeImageSnapshot();
       if (!img) {
-        console.error('no snapshot');
+        SkDebug('no snapshot');
         return;
       }
       var png = img.encodeToData();
       if (!png) {
-        console.error('encoding failure');
+        SkDebug('encoding failure');
         return
       }
       // TODO(kjlubick): clean this up a bit - maybe better naming?
       var pngBytes = CanvasKit.getSkDataBytes(png);
-      if (isNode) {
-        // See https://stackoverflow.com/a/12713326
-        var b64encoded = Buffer.from(pngBytes).toString('base64');
-      } else {
-        var b64encoded = btoa(String.fromCharCode.apply(null, pngBytes));
-      }
-      return 'data:image/png;base64,' + b64encoded;
+      return 'data:image/png;base64,' + toBase64String(pngBytes);
     }
 
     this.dispose = function() {
@@ -315,7 +320,7 @@
     // (but neither does node-canvas's?)
     var fontSize = fontSizeRegex.exec(fontStr);
     if (!fontSize) {
-      console.error('Could not parse font size', fontStr);
+      SkDebug('Could not parse font size' + fontStr);
       return 16;
     }
     var size = fontSize[1];
@@ -401,7 +406,7 @@
         return nc;
       }
     }
-    console.error('unrecognized color ', colorStr);
+    SkDebug('unrecognized color ' + colorStr);
     return CanvasKit.BLACK;
   }
 
@@ -413,6 +418,7 @@
   // would really help here. Since we don't, we pre-compute
   // the map, which saves (a tiny amount of) startup time
   // and (a small amount of) code size.
+  /* @dict */
   var colorMap = {"aliceblue":-984833,"antiquewhite":-332841,"aqua":-16711681,"aquamarine":-8388652,"azure":-983041,"beige":-657956,"bisque":-6972,"black":-16777216,"blanchedalmond":-5171,"blue":-16776961,"blueviolet":-7722014,"brown":-5952982,"burlywood":-2180985,"cadetblue":-10510688,"chartreuse":-8388864,"chocolate":-2987746,"coral":-32944,"cornflowerblue":-10185235,"cornsilk":-1828,"crimson":-2354116,"cyan":-16711681,"darkblue":-16777077,"darkcyan":-16741493,"darkgoldenrod":-4684277,"darkgray":-5658199,"darkgreen":-16751616,"darkgrey":-5658199,"darkkhaki":-4343957,"darkmagenta":-7667573,"darkolivegreen":-11179217,"darkorange":-29696,"darkorchid":-6737204,"darkred":-7667712,"darksalmon":-1468806,"darkseagreen":-7357297,"darkslateblue":-12042869,"darkslategray":-13676721,"darkslategrey":-13676721,"darkturquoise":-16724271,"darkviolet":-7077677,"deeppink":-60269,"deepskyblue":-16728065,"dimgray":-9868951,"dimgrey":-9868951,"dodgerblue":-14774017,"firebrick":-5103070,"floralwhite":-1296,"forestgreen":-14513374,"fuchsia":-65281,"gainsboro":-2302756,"ghostwhite":-460545,"gold":-10496,"goldenrod":-2448096,"gray":-8355712,"green":-16744448,"greenyellow":-5374161,"grey":-8355712,"honeydew":-983056,"hotpink":-38476,"indianred":-3318692,"indigo":-11861886,"ivory":-16,"khaki":-989556,"lavender":-1644806,"lavenderblush":-3851,"lawngreen":-8586240,"lemonchiffon":-1331,"lightblue":-5383962,"lightcoral":-1015680,"lightcyan":-2031617,"lightgoldenrodyellow":-329006,"lightgray":-2894893,"lightgreen":-7278960,"lightgrey":-2894893,"lightpink":-18751,"lightsalmon":-24454,"lightseagreen":-14634326,"lightskyblue":-7876870,"lightslategray":-8943463,"lightslategrey":-8943463,"lightsteelblue":-5192482,"lightyellow":-32,"lime":-16711936,"limegreen":-13447886,"linen":-331546,"magenta":-65281,"maroon":-8388608,"mediumaquamarine":-10039894,"mediumblue":-16777011,"mediumorchid":-4565549,"mediumpurple":-7114533,"mediumseagreen":-12799119,"mediumslateblue":-8689426,"mediumspringgreen":-16713062,"mediumturquoise":-12004916,"mediumvioletred":-3730043,"midnightblue":-15132304,"mintcream":-655366,"mistyrose":-6943,"moccasin":-6987,"navajowhite":-8531,"navy":-16777088,"oldlace":-133658,"olive":-8355840,"olivedrab":-9728477,"orange":-23296,"orangered":-47872,"orchid":-2461482,"palegoldenrod":-1120086,"palegreen":-6751336,"paleturquoise":-5247250,"palevioletred":-2396013,"papayawhip":-4139,"peachpuff":-9543,"peru":-3308225,"pink":-16181,"plum":-2252579,"powderblue":-5185306,"purple":-8388480,"rebeccapurple":-10079335,"red":-65536,"rosybrown":-4419697,"royalblue":-12490271,"saddlebrown":-7650029,"salmon":-360334,"sandybrown":-744352,"seagreen":-13726889,"seashell":-2578,"sienna":-6270419,"silver":-4144960,"skyblue":-7876885,"slateblue":-9807155,"slategray":-9404272,"slategrey":-9404272,"snow":-1286,"springgreen":-16711809,"steelblue":-12156236,"tan":-2968436,"teal":-16744320,"thistle":-2572328,"transparent":0,"tomato":-40121,"turquoise":-12525360,"violet":-1146130,"wheat":-663885,"white":-1,"whitesmoke":-657931,"yellow":-256,"yellowgreen":-6632142};
 
 }(Module)); // When this file is loaded in, the high level object is "Module";

experimental/canvaskit/interface.js

@@ -80,7 +80,7 @@
                             a[7] || 0, a[8] || 0, a[9] || 1,
                             extend);
       } else {
-        console.error('addPath expected to take 1, 2, 7, or 10 required args. Got ' + args.length);
+        SkDebug('addPath expected to take 1, 2, 7, or 10 required args. Got ' + args.length);
         return null;
       }
       return this;
@@ -100,7 +100,7 @@
         var a = arguments;
         this._addRect(a[0], a[1], a[2], a[3], a[4] || false);
       } else {
-        console.error('addRect expected to take 1, 2, 4, or 5 args. Got ' + arguments.length);
+        SkDebug('addRect expected to take 1, 2, 4, or 5 args. Got ' + arguments.length);
         return null;
       }
       return this;

experimental/canvaskit/release.js

@@ -0,0 +1,4 @@
+function SkDebug(msg) {
+  // by leaving this blank, closure optimizes out calls (and the messages)
+  // which trims down code size and marginally improves runtime speed.
+}

site/user/modules/canvaskit.md

@@ -102,7 +102,7 @@ Samples
   var locate_file = '';
   if (window.WebAssembly && typeof window.WebAssembly.compile === 'function') {
     console.log('WebAssembly is supported!');
-    locate_file = 'https://storage.googleapis.com/skia-cdn/canvaskit-wasm/0.2.0/bin/';
+    locate_file = 'https://storage.googleapis.com/skia-cdn/canvaskit-wasm/0.2.1/bin/';
   } else {
     console.log('WebAssembly is not supported (yet) on this browser.');
     document.getElementById('demo').innerHTML = "<div>WASM not supported by your browser. Try a recent version of Chrome, Firefox, Edge, or Safari.</div>";