<!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">
  var CanvasKit = null;
  CanvasKitInit({
    locateFile: (file) => '/node_modules/canvaskit/bin/'+file,
  }).ready().then((CK) => {
    CanvasKit = CK;
    ViewerMain(CanvasKit);
  });

  function ViewerMain(CanvasKit) {
    if (!CanvasKit) {
      console.error('CanvasKit not available.');
      return;
    }
    if (!CanvasKit.MakeSlide) {
      console.error('Not compiled with Viewer.');
      return;
    }

    const htmlCanvas = document.getElementById('viewer_canvas');
    htmlCanvas.width = window.innerWidth;
    htmlCanvas.height = window.innerHeight;

    const surface = CanvasKit.MakeCanvasSurface(htmlCanvas);
    if (!surface) {
      console.error('Could not make surface');
      return;
    }

    const slideName = 'WavyPathText';
    const slide = CanvasKit.MakeSlide(slideName);
    if (!slide) {
      console.error('Could not make slide ' + slideName);
      return;
    }

    slide.load(htmlCanvas.width, htmlCanvas.height);

    const fps = {
      frames: 0,
      startMs: window.performance.now()
    };

    surface.requestAnimationFrame(function(canvas) {
      slide.draw(canvas);
      ++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>