| <!DOCTYPE html> |
| <title>CanvasKit Viewer (Skia via Web Assembly)</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <style> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| </style> |
| |
| <canvas id=viewer_canvas></canvas> |
| |
| <script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script> |
| |
| <script type="text/javascript" charset="utf-8"> |
| const flags = {}; |
| for (pair of location.hash.substring(1).split(',')) { |
| const [key, value] = pair.split(':', 2); |
| flags[key] = value; |
| } |
| window.onhashchange = function() { |
| location.reload(); |
| }; |
| |
| var CanvasKit = null; |
| CanvasKitInit({ |
| locateFile: (file) => '/node_modules/canvaskit/bin/'+file, |
| }).then((CK) => { |
| if (!CK) { |
| throw 'CanvasKit not available.'; |
| } |
| LoadSlide(CK); |
| }); |
| |
| function LoadSlide(CanvasKit) { |
| if (!CanvasKit.MakeSlide || !CanvasKit.MakeSkpSlide) { |
| throw 'Not compiled with Viewer.'; |
| } |
| const slideName = flags.slide || 'WavyPathText'; |
| if (slideName.endsWith('.skp')) { |
| fetch(slideName).then(function(response) { |
| if (response.status != 200) { |
| throw 'Error fetching ' + slideName; |
| } |
| response.arrayBuffer().then(function(data) { |
| let slide = CanvasKit.MakeSkpSlide(slideName, data); |
| if (!slide) { |
| throw 'Could not parse skp data for slide ' + slideName; |
| } |
| ViewerMain(CanvasKit, slide); |
| }); |
| }); |
| } else { |
| let slide = CanvasKit.MakeSlide(slideName); |
| if (!slide) { |
| throw 'Could not make slide ' + slideName; |
| } |
| ViewerMain(CanvasKit, slide); |
| } |
| } |
| |
| function ViewerMain(CanvasKit, slide) { |
| const width = window.innerWidth; |
| const height = window.innerHeight; |
| const htmlCanvas = document.getElementById('viewer_canvas'); |
| htmlCanvas.width = width; |
| htmlCanvas.height = height; |
| slide.load(width, height); |
| |
| const doMSAA = (flags.msaa > 1); |
| let surface; |
| if (doMSAA) { |
| let ctx = CanvasKit.GetWebGLContext(htmlCanvas); |
| let grContext = CanvasKit.MakeGrContext(ctx); |
| let sampleCnt = parseInt(flags.msaa); |
| surface = CanvasKit.MakeOffscreenFramebuffer(grContext, width, height, sampleCnt); |
| if (!surface) { |
| throw 'Could not create offscreen msaa render target.'; |
| } |
| } else { |
| surface = CanvasKit.MakeCanvasSurface(htmlCanvas); |
| if (!surface) { |
| throw 'Could not make canvas surface'; |
| } |
| } |
| |
| const fps = { |
| frames: 0, |
| startMs: window.performance.now() |
| }; |
| |
| surface.requestAnimationFrame(function(canvas) { |
| slide.draw(canvas); |
| if (doMSAA) { |
| CanvasKit.BlitOffscreenFramebuffer(surface, 0, 0, width, height, 0, 0, width, height, |
| CanvasKit.GLFilter.Nearest); |
| } |
| |
| ++fps.frames; |
| const ms = window.performance.now(); |
| const sec = (ms - fps.startMs) / 1000; |
| if (sec > 2) { |
| console.log(Math.round(fps.frames / sec) + ' fps'); |
| fps.frames = 0; |
| fps.startMs = ms; |
| } |
| |
| if (slide.animate(ms * 1e6)) { |
| surface.requestAnimationFrame(arguments.callee); |
| } |
| }); |
| } |
| </script> |
