// Set up worker and send it a message with the canvas to draw to. const offscreenCanvas = document.getElementById('offscreen-canvas').transferControlToOffscreen(); const worker = new Worker('worker.js'); worker.postMessage({ offscreenCanvas }, [offscreenCanvas]); const canvasKitInitPromise = CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/'+file}); const skottieJsonPromise = fetch('https://storage.googleapis.com/skia-cdn/misc/lego_loader.json') .then((response) => response.text()); Promise.all([ canvasKitInitPromise, skottieJsonPromise ]).then(([ CanvasKit, jsonStr ]) => { const onscreenCanvas = document.getElementById('onscreen-canvas'); const surface = CanvasKit.MakeWebGLCanvasSurface(onscreenCanvas, null); if (!surface) { throw 'Could not make canvas surface'; } SkottieExample(CanvasKit, surface, jsonStr); }); document.getElementById('busy-button').addEventListener('click', () => { const startTime = performance.now(); // This loop runs for 1300ms, emulating computation. // 1300ms was chosen because it causes a visually obvious lag in the lego loader animation. while (performance.now() - startTime < 1300) { } });