blob: 5a0a9cab756250a7bf6d6bbb20e801cbec9e425c [file] [log] [blame]
<!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://unpkg.com/canvaskit-wasm@0.25.0/bin/full/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://unpkg.com/canvaskit-wasm@0.25.0/bin/full/' + 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>