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<!-- Comment the following line out and the subsequent line in to use a local build of CanvasKit --> 7<script type="text/javascript" src="https://unpkg.com/[email protected]/bin/full/canvaskit.js"></script> 8<!-- <script type="text/javascript" src="/build/canvaskit.js"></script> --> 9 10<style> 11 canvas { 12 border: 1px dashed grey; 13 } 14</style> 15 16<body> 17 <h1>Hello world</h1> 18 19 <canvas id=draw width=500 height=500></canvas> 20</body> 21 22<script type="text/javascript" charset="utf-8"> 23 // Comment the following line out and the subsequent line in to use a local build of CanvasKit 24 const base = 'https://unpkg.com/[email protected]/bin/full/'; 25 // const base = '/build/'; 26 const ckLoaded = CanvasKitInit({ locateFile: (file) => base + file }); 27 28 ckLoaded.then((CanvasKit) => { 29 const surface = CanvasKit.MakeCanvasSurface('draw'); 30 if (!surface) { 31 throw 'Could not make surface'; 32 } 33 34 const paint = new CanvasKit.Paint(); 35 paint.setColor(CanvasKit.RED); 36 37 const textPaint = new CanvasKit.Paint(); 38 const textFont = new CanvasKit.Font(null, 20); 39 40 function drawFrame(canvas) { 41 canvas.drawRect(CanvasKit.LTRBRect(10, 10, 50, 50), paint); 42 canvas.drawText('If you see this, CanvasKit loaded!!', 5, 100, textPaint, textFont); 43 } 44 surface.requestAnimationFrame(drawFrame); 45 }); 46 47</script>