<!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">
<script type="text/javascript" src="https://particles.skia.org/static/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">
  const ckLoaded = CanvasKitInit({locateFile: (file) => 'https://particles.skia.org/static/'+file});

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

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

    const textPaint = new CanvasKit.SkPaint();
    const textFont = new CanvasKit.SkFont(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>