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