1<!DOCTYPE html>
2<title>Hello World Demo</title>
3<meta charset="utf-8" />
4<meta http-equiv="X-UA-Compatible" content="IE=edge">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script>
7
8<style>
9  canvas {
10    border: 1px dashed grey;
11  }
12</style>
13
14<body>
15  <h1>Hello world</h1>
16
17  <canvas id=draw width=500 height=500></canvas>
18</body>
19
20<script type="text/javascript" charset="utf-8">
21  const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/' + file });
22
23  ckLoaded.then((CanvasKit) => {
24    const surface = CanvasKit.MakeCanvasSurface('draw');
25    if (!surface) {
26      throw 'Could not make surface';
27    }
28
29    const paint = new CanvasKit.Paint();
30    paint.setColor(CanvasKit.RED);
31
32    const textPaint = new CanvasKit.Paint();
33    const textFont = new CanvasKit.Font(null, 20);
34
35    function drawFrame(canvas) {
36      canvas.drawRect(CanvasKit.LTRBRect(10, 10, 50, 50), paint);
37      canvas.drawText('If you see this, CanvasKit loaded!!', 5, 100, textPaint, textFont);
38    }
39    surface.requestAnimationFrame(drawFrame);
40  });
41
42</script>