Move all canvaskit example resources to CDN

Change-Id: I92c83051017648d5703b06daac77e99ff40aeb2e
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/273000
Commit-Queue: Nathaniel Nifong <nifong@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>

Author: Nathaniel Nifong

modules/canvaskit/canvaskit/NotoSerif-Regular.ttf

@@ -57,6 +57,7 @@ <h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
 
   var bonesImageData = null;
   var mandrillData = null;
+  var cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
   CanvasKitInit({
     locateFile: (file) => '/node_modules/canvaskit/bin/'+file,
   }).ready().then((CK) => {
@@ -88,21 +89,21 @@ <h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
     AtlasAPI1(CanvasKit, mandrillData);
   });
 
-  fetch('https://storage.googleapis.com/skia-cdn/misc/bones.jpg').then((resp) => {
+  fetch(cdn + 'bones.jpg').then((resp) => {
     resp.arrayBuffer().then((buffer) => {
       bonesImageData = buffer;
       VertexAPI2(CanvasKit, bonesImageData);
     });
   });
 
-  fetch('./Roboto-Regular.woff').then((resp) => {
+  fetch(cdn + 'Roboto-Regular.ttf').then((resp) => {
     resp.arrayBuffer().then((buffer) => {
       robotoData = buffer;
       DrawingExample(CanvasKit, robotoData);
     });
   });
 
-  fetch('./NotoSerif-Regular.ttf').then((resp) => {
+  fetch(cdn + 'NotoSerif-Regular.ttf').then((resp) => {
     resp.arrayBuffer().then((buffer) => {
       notoserifData = buffer;
       TextShapingAPI1(CanvasKit, notoserifData);
@@ -111,7 +112,7 @@ <h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
   });
 
   // Mandrill test image
-  fetch('./test.png').then((response) => response.arrayBuffer()).then((buffer) => {
+  fetch(cdn + 'test.png').then((response) => response.arrayBuffer()).then((buffer) => {
     mandrillData = buffer;
     AtlasAPI1(CanvasKit, mandrillData);
   });
@@ -328,14 +329,14 @@ <h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
     let skcanvas = CanvasKit.MakeCanvas(300, 300);
     let realCanvas = document.getElementById('api1_c');
 
-    let skPromise   = fetch('./test.png')
+    let skPromise   = fetch(cdn + 'test.png')
                         // if clients want to use a Blob, they are responsible
                         // for reading it themselves.
                         .then((response) => response.arrayBuffer())
                         .then((buffer) => {
                           skcanvas._img = skcanvas.decodeImage(buffer);
                         });
-    let realPromise = fetch('./test.png')
+    let realPromise = fetch(cdn + 'test.png')
                         .then((response) => response.blob())
                         .then((blob) => createImageBitmap(blob))
                         .then((bitmap) => {
@@ -711,14 +712,14 @@ <h2> CanvasKit can allow for text shaping (e.g. breaking, kerning)</h2>
     let skcanvas = CanvasKit.MakeCanvas(300, 300);
     let realCanvas = document.getElementById('api7_c');
 
-    let skPromise   = fetch('./test.png')
+    let skPromise   = fetch(cdn + 'test.png')
                         // if clients want to use a Blob, they are responsible
                         // for reading it themselves.
                         .then((response) => response.arrayBuffer())
                         .then((buffer) => {
                           skcanvas._img = skcanvas.decodeImage(buffer);
                         });
-    let realPromise = fetch('./test.png')
+    let realPromise = fetch(cdn + 'test.png')
                         .then((response) => response.blob())
                         .then((blob) => createImageBitmap(blob))
                         .then((bitmap) => {

modules/canvaskit/canvaskit/Roboto-Regular.ttf

@@ -54,6 +54,7 @@ <h2> 3D perspective transformations </h2>
   var bonesImageData = null;
   var flightAnimGif = null;
   var skpData = null;
+  var cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
   const ckLoaded = CanvasKitInit({
     locateFile: (file) => '/node_modules/canvaskit/bin/'+file,
   }).ready();
@@ -78,36 +79,36 @@ <h2> 3D perspective transformations </h2>
     SkpExample(CanvasKit, skpData);
   });
 
-  fetch('https://storage.googleapis.com/skia-cdn/misc/lego_loader.json').then((resp) => {
+  fetch(cdn + 'lego_loader.json').then((resp) => {
     resp.text().then((str) => {
       legoJSON = str;
       SkottieExample(CanvasKit, 'sk_legos', legoJSON,
                     {fLeft: -50, fTop: 0, fRight: 350, fBottom: 300});
     });
   });
 
-  fetch('https://storage.googleapis.com/skia-cdn/misc/drinks.json').then((resp) => {
+  fetch(cdn + 'drinks.json').then((resp) => {
     resp.text().then((str) => {
       drinksJSON = str;
       SkottieExample(CanvasKit, 'sk_drinks', drinksJSON, fullBounds);
     });
   });
 
-  fetch('https://storage.googleapis.com/skia-cdn/misc/confetti.json').then((resp) => {
+  fetch(cdn + 'confetti.json').then((resp) => {
     resp.text().then((str) => {
       confettiJSON = str;
       SkottieExample(CanvasKit, 'sk_party', confettiJSON, fullBounds);
     });
   });
 
-  fetch('https://storage.googleapis.com/skia-cdn/misc/onboarding.json').then((resp) => {
+  fetch(cdn + 'onboarding.json').then((resp) => {
     resp.text().then((str) => {
       onboardingJSON = str;
       SkottieExample(CanvasKit, 'sk_onboarding', onboardingJSON, fullBounds);
     });
   });
 
-  fetch('https://storage.googleapis.com/skia-cdn/misc/skottie_sample_multiframe.json').then((resp) => {
+  fetch(cdn + 'skottie_sample_multiframe.json').then((resp) => {
     resp.text().then((str) => {
       multiFrameJSON = str;
       SkottieExample(CanvasKit, 'sk_animated_gif', multiFrameJSON, fullBounds, {
@@ -116,7 +117,7 @@ <h2> 3D perspective transformations </h2>
     });
   });
 
-  fetch('https://storage.googleapis.com/skia-cdn/misc/flightAnim.gif').then((resp) => {
+  fetch(cdn + 'flightAnim.gif').then((resp) => {
     resp.arrayBuffer().then((buffer) => {
       flightAnimGif = buffer;
       SkottieExample(CanvasKit, 'sk_animated_gif', multiFrameJSON, fullBounds, {
@@ -125,22 +126,22 @@ <h2> 3D perspective transformations </h2>
     });
   });
 
-  fetch('./Roboto-Regular.ttf').then((resp) => {
+  fetch(cdn + 'Roboto-Regular.ttf').then((resp) => {
     resp.arrayBuffer().then((buffer) => {
       robotoData = buffer;
       ParagraphAPI1(CanvasKit, robotoData);
     });
   });
 
-  fetch('./red_line.skp').then((response) => response.arrayBuffer()).then((buffer) => {
+  fetch(cdn + 'red_line.skp').then((response) => response.arrayBuffer()).then((buffer) => {
     skpData = buffer;
     SkpExample(CanvasKit, skpData);
   });
 
-  const loadDog = fetch('https://storage.googleapis.com/skia-cdn/misc/dog.jpg').then((response) => response.arrayBuffer());
-  const loadMandrill = fetch('https://storage.googleapis.com/skia-cdn/misc/mandrill_256.png').then((response) => response.arrayBuffer());
-  const loadBrickTex = fetch('./brickwork-texture.jpg').then((response) => response.arrayBuffer());
-  const loadBrickBump = fetch('./brickwork_normal-map.jpg').then((response) => response.arrayBuffer());
+  const loadDog = fetch(cdn + 'dog.jpg').then((response) => response.arrayBuffer());
+  const loadMandrill = fetch(cdn + 'mandrill_256.png').then((response) => response.arrayBuffer());
+  const loadBrickTex = fetch(cdn + 'brickwork-texture.jpg').then((response) => response.arrayBuffer());
+  const loadBrickBump = fetch(cdn + 'brickwork_normal-map.jpg').then((response) => response.arrayBuffer());
   Promise.all([ckLoaded, loadBrickTex, loadBrickBump]).then((results) => {Camera3D(...results)});
 
   function SkottieExample(CanvasKit, id, jsonStr, bounds, assets) {