54c1b3dd43
This is a massive breaking change for all existing users of CanvasKit. It will be (one of the only) changes in 0.19.0 to make the transition easier. Suggested reviewing order: - index.d.ts (to see type changes). Notice SkPicture still has Sk prefix, but no other types do (this felt "right" since Sk is part of the name of the type, but I can be swayed on this). - canvaskit-wasm-tests.ts - tests/*.spec.js - interface.js and helper.js - html examples - markdown files Change-Id: I3b3d3815df2078f986893df3c70101d6248c117d Docs-Preview: https://skia.org/?cl=322617 Bug: skia:10717 Reviewed-on: https://skia-review.googlesource.com/c/skia/+/322617 Commit-Queue: Kevin Lubick <kjlubick@google.com> Reviewed-by: Nathaniel Nifong <nifong@google.com>
43 lines
1.2 KiB
HTML
43 lines
1.2 KiB
HTML
<!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://particles.skia.org/static/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://particles.skia.org/static/'+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>
|