1// Set up worker and send it a message with the canvas to draw to. 2const offscreenCanvas = document.getElementById('offscreen-canvas').transferControlToOffscreen(); 3const worker = new Worker('worker.js'); 4worker.postMessage({ offscreenCanvas }, [offscreenCanvas]); 5 6const canvasKitInitPromise = 7 CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/'+file}); 8const skottieJsonPromise = 9 fetch('https://storage.googleapis.com/skia-cdn/misc/lego_loader.json') 10 .then((response) => response.text()); 11 12Promise.all([ 13 canvasKitInitPromise, 14 skottieJsonPromise 15]).then(([ 16 CanvasKit, 17 jsonStr 18]) => { 19 const onscreenCanvas = document.getElementById('onscreen-canvas'); 20 const surface = CanvasKit.MakeWebGLCanvasSurface(onscreenCanvas, null); 21 if (!surface) { 22 throw 'Could not make canvas surface'; 23 } 24 25 SkottieExample(CanvasKit, surface, jsonStr); 26}); 27 28document.getElementById('busy-button').addEventListener('click', () => { 29 const startTime = performance.now(); 30 // This loop runs for 1300ms, emulating computation. 31 // 1300ms was chosen because it causes a visually obvious lag in the lego loader animation. 32 while (performance.now() - startTime < 1300) { 33 } 34}); 35