| <!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> |
