<!DOCTYPE html>
<title>Hello World Demo</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">
<!-- Comment the following line out and the subsequent line in to use a local build of CanvasKit -->
<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script>
<!-- <script type="text/javascript" src="/build/canvaskit.js"></script> -->

<style>
  canvas {
    border: 1px dashed grey;
  }
</style>

<body>
  <h1>Hello world</h1>

  <canvas id=draw width=500 height=500></canvas>
</body>

<script type="text/javascript" charset="utf-8">
  // Comment the following line out and the subsequent line in to use a local build of CanvasKit
  const base = 'https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/';
  // const base = '/build/';
  const ckLoaded = CanvasKitInit({ locateFile: (file) => base + file });

  ckLoaded.then((CanvasKit) => {
    const surface = CanvasKit.MakeCanvasSurface('draw');
    if (!surface) {
      throw 'Could not make surface';
    }

    const paint = new CanvasKit.Paint();
    paint.setColor(CanvasKit.RED);

    const textPaint = new CanvasKit.Paint();
    const textFont = new CanvasKit.Font(null, 20);

    function drawFrame(canvas) {
      canvas.drawRect(CanvasKit.LTRBRect(10, 10, 50, 50), paint);
      canvas.drawText('If you see this, CanvasKit loaded!!', 5, 100, textPaint, textFont);
    }
    surface.requestAnimationFrame(drawFrame);
  });

</script>