1importScripts('https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js'); 2importScripts('shared.js'); 3 4const CanvasKitPromise = 5 CanvasKitInit({locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/'+file}); 6 7const path2dAnimator = new Animator(); 8const canvasKitAnimator = new Animator(); 9addEventListener('message', async ({ data: {svgData, offscreenCanvas, type, switchMethod} }) => { 10 // The worker expect to receive 2 messages after initialization: One with an offscreenCanvas 11 // for Path2D rendering, and one with an offscreenCanvas for CanvasKit rendering. 12 if (svgData && offscreenCanvas && type) { 13 if (type === 'Path2D') { 14 path2dAnimator.renderer = 15 new Path2dRenderer(svgData, offscreenCanvas); 16 } 17 if (type === 'CanvasKit') { 18 const CanvasKit = await CanvasKitPromise; 19 canvasKitAnimator.renderer = 20 new CanvasKitRenderer(svgData, offscreenCanvas, CanvasKit); 21 } 22 } 23 // The worker receives a "switchMethod" message whenever the user clicks a rendering 24 // method button on the web page. 25 if (switchMethod) { 26 // Pause other renderers and start correct renderer 27 canvasKitAnimator.stop(); 28 path2dAnimator.stop(); 29 30 if (switchMethod === 'Path2D') { 31 path2dAnimator.start(); 32 } else if (switchMethod === 'CanvasKit') { 33 canvasKitAnimator.start(); 34 } 35 } 36}); 37 38// Report framerates of Path2D and CanvasKit rendering back to main.js 39setInterval(() => { 40 if (path2dAnimator.framesCount > 0) { 41 postMessage({ 42 renderMethod: 'Path2D', 43 framesCount: path2dAnimator.framesCount, 44 totalFramesMs: path2dAnimator.totalFramesMs 45 }); 46 } 47 if (canvasKitAnimator.framesCount > 0) { 48 postMessage({ 49 renderMethod: 'CanvasKit', 50 framesCount: canvasKitAnimator.framesCount, 51 totalFramesMs: canvasKitAnimator.totalFramesMs 52 }); 53 } 54}, 1000); 55