[canvaskit] Remove references to particles.skia.org from demos
We should encourage users to use a real CDN, not a random build of ours.
This also fixes a few broken demos.
Change-Id: I3b607665744b5f481bca0b9b3072aaa25b3d2c57
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/371221
Reviewed-by: Kevin Lubick <kjlubick@google.com>
diff --git a/demos.skia.org/demos/hello_world/index.html b/demos.skia.org/demos/hello_world/index.html
index a0d3acc..4595dd6 100644
--- a/demos.skia.org/demos/hello_world/index.html
+++ b/demos.skia.org/demos/hello_world/index.html
@@ -3,7 +3,7 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
+<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.23.0/bin/canvaskit.js"></script>
<style>
canvas {
@@ -18,7 +18,7 @@
</body>
<script type="text/javascript" charset="utf-8">
- const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://particles.skia.org/dist/' + file });
+ const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.23.0/bin/' + file });
ckLoaded.then((CanvasKit) => {
const surface = CanvasKit.MakeCanvasSurface('draw');
diff --git a/demos.skia.org/demos/image_decode_web_worker/index.html b/demos.skia.org/demos/image_decode_web_worker/index.html
index 9ac4393..2db06962 100644
--- a/demos.skia.org/demos/image_decode_web_worker/index.html
+++ b/demos.skia.org/demos/image_decode_web_worker/index.html
@@ -40,5 +40,5 @@
</div>
</body>
-<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
+<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.23.0/bin/canvaskit.js"></script>
<script type="text/javascript" src="main.js"></script>
\ No newline at end of file
diff --git a/demos.skia.org/demos/image_decode_web_worker/main.js b/demos.skia.org/demos/image_decode_web_worker/main.js
index 4d4fcd6..dfa9660 100644
--- a/demos.skia.org/demos/image_decode_web_worker/main.js
+++ b/demos.skia.org/demos/image_decode_web_worker/main.js
@@ -2,7 +2,7 @@
const worker = new Worker('worker.js');
const canvasKitInitPromise =
- CanvasKitInit({locateFile: (file) => 'https://particles.skia.org/dist/'+file});
+ CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.23.0/bin/'+file});
const bigImagePromise =
fetch('https://upload.wikimedia.org/wikipedia/commons/3/30/Large_Gautama_Buddha_statue_in_Buddha_Park_of_Ravangla%2C_Sikkim.jpg')
@@ -63,8 +63,13 @@
worker.addEventListener('message', (e) => {
const decodedBuffer = e.data.decodedArrayBuffer;
const pixels = new Uint8Array(decodedBuffer);
- decodedImage = CanvasKit.MakeImage(pixels, e.data.width, e.data.height,
- CanvasKit.AlphaType.Unpremul, CanvasKit.ColorType.RGBA_8888, CanvasKit.ColorSpace.SRGB);
+ decodedImage = CanvasKit.MakeImage({
+ width: e.data.width,
+ height: e.data.height,
+ alphaType: CanvasKit.AlphaType.Unpremul,
+ colorType: CanvasKit.ColorType.RGBA_8888,
+ colorSpace: CanvasKit.ColorSpace.SRGB
+ }, pixels, 4 * e.data.width);
});
document.getElementById('clear-button').addEventListener('click', () => {
if (decodedImage) {
diff --git a/demos.skia.org/demos/path_performance/index.html b/demos.skia.org/demos/path_performance/index.html
index c93ad6e..13da0b4 100644
--- a/demos.skia.org/demos/path_performance/index.html
+++ b/demos.skia.org/demos/path_performance/index.html
@@ -92,6 +92,6 @@
<canvas id="CanvasKit-canvas" height=500 width=500></canvas>
</div>
</body>
-<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
+<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.23.0/bin/canvaskit.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="main.js"></script>
diff --git a/demos.skia.org/demos/path_performance/shared.js b/demos.skia.org/demos/path_performance/shared.js
index 0bf2f7b..134ad04 100644
--- a/demos.skia.org/demos/path_performance/shared.js
+++ b/demos.skia.org/demos/path_performance/shared.js
@@ -103,7 +103,7 @@
constructor(svgData, offscreenCanvas, CanvasKit) {
this.CanvasKit = CanvasKit;
this.data = svgData.map(([pathString, fillColor]) => [
- CanvasKit.MakePathFromSVGString(pathString),
+ CanvasKit.Path.MakeFromSVGString(pathString),
CanvasKit.parseColorString(fillColor)
]);
diff --git a/demos.skia.org/demos/path_performance/worker.js b/demos.skia.org/demos/path_performance/worker.js
index 4315660..6b4a798 100644
--- a/demos.skia.org/demos/path_performance/worker.js
+++ b/demos.skia.org/demos/path_performance/worker.js
@@ -1,8 +1,8 @@
-importScripts('https://particles.skia.org/dist/canvaskit.js');
+importScripts('https://unpkg.com/canvaskit-wasm@0.23.0/bin/canvaskit.js');
importScripts('shared.js');
const CanvasKitPromise =
- CanvasKitInit({locateFile: (file) => 'https://particles.skia.org/dist/'+file});
+ CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.23.0/bin/'+file});
const path2dAnimator = new Animator();
const canvasKitAnimator = new Animator();
diff --git a/demos.skia.org/demos/web_worker/index.html b/demos.skia.org/demos/web_worker/index.html
index fcbd1df..5ea84ad 100644
--- a/demos.skia.org/demos/web_worker/index.html
+++ b/demos.skia.org/demos/web_worker/index.html
@@ -33,6 +33,7 @@
<canvas id="offscreen-canvas" width=500 height=500></canvas>
</div>
</body>
+<!-- TODO(kjlubick) Remove the particles link when we have skottie in npm again -->
<script type="text/javascript" src="https://particles.skia.org/dist/canvaskit.js"></script>
<script type="text/javascript" src="shared.js"></script>
-<script type="text/javascript" src="main.js"></script>
\ No newline at end of file
+<script type="text/javascript" src="main.js"></script>
diff --git a/demos.skia.org/demos/web_worker/main.js b/demos.skia.org/demos/web_worker/main.js
index 8212e2f..363ab90 100644
--- a/demos.skia.org/demos/web_worker/main.js
+++ b/demos.skia.org/demos/web_worker/main.js
@@ -31,4 +31,4 @@
// 1300ms was chosen because it causes a visually obvious lag in the lego loader animation.
while (performance.now() - startTime < 1300) {
}
-});
\ No newline at end of file
+});
diff --git a/demos.skia.org/demos/web_worker/shared.js b/demos.skia.org/demos/web_worker/shared.js
index 8bab2eb..4f212f1 100644
--- a/demos.skia.org/demos/web_worker/shared.js
+++ b/demos.skia.org/demos/web_worker/shared.js
@@ -4,7 +4,6 @@
}
const animation = CanvasKit.MakeAnimation(jsonStr);
const duration = animation.duration() * 1000;
- bounds = {fLeft: 0, fTop: 0, fRight: 500, fBottom: 500};
const firstFrame = performance.now();
@@ -13,7 +12,7 @@
const seek = ((now - firstFrame) / duration) % 1.0;
animation.seek(seek);
- animation.render(skcanvas, bounds);
+ animation.render(skcanvas, [0, 0, 500, 500]);
surface.requestAnimationFrame(drawFrame);
}
