canvaskit-wasm
Version:
A WASM version of Skia's Canvas API
130 lines (99 loc) • 3.97 kB
HTML
<title>CanvasKit (Skia via Web Assembly)</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">
<style>
canvas, img {
border: 1px dashed #AAA;
}
</style>
<canvas id=api1 width=300 height=300></canvas>
<canvas id=api2 width=300 height=300></canvas>
<canvas id=api3 width=300 height=300></canvas>
<br>
<img id="src" src="https://storage.googleapis.com/skia-cdn/misc/test.png"
width=40 height=40 crossorigin="anonymous">
<canvas id=api4 width=300 height=300></canvas>
<canvas id=api5 width=300 height=300></canvas>
<canvas id=api6 width=300 height=300></canvas>
<script type="text/javascript" src="/build/canvaskit.js"></script>
<script type="text/javascript" charset="utf-8">
const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
const ckLoaded = CanvasKitInit({locateFile: (file) => '/build/'+file});
const loadTestImage = fetch(cdn + 'test.png').then((response) => response.arrayBuffer());
const imageEle = document.getElementById("src");
Promise.all([ckLoaded, loadTestImage, imageEle.decode()]).then((results) => {
ContextSharingExample(results[0]);
MultiCanvasExample(...results);
});
// This example shows how CanvasKit can automatically switch between multiple canvases
// with different WebGL contexts.
function MultiCanvasExample(CanvasKit, imgBytes) {
const paint = new CanvasKit.Paint();
const surfOne = CanvasKit.MakeWebGLCanvasSurface("api1");
const canvasOne = surfOne.getCanvas();
const surfTwo = CanvasKit.MakeWebGLCanvasSurface("api2");
const canvasTwo = surfTwo.getCanvas();
const surfThree = CanvasKit.MakeWebGLCanvasSurface("api3");
const canvasThree = surfThree.getCanvas();
function firstFrame() {
paint.setColor(CanvasKit.Color4f(1, 0, 0, 1)); // red
canvasOne.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
surfOne.flush();
paint.setColor(CanvasKit.Color4f(0, 1, 0, 1)); // green
canvasTwo.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
surfTwo.flush();
paint.setColor(CanvasKit.Color4f(0, 0, 1, 1)); // blue
canvasThree.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
surfThree.flush();
window.requestAnimationFrame(secondFrame);
}
let img;
function secondFrame() {
img = CanvasKit.MakeImageFromEncoded(imgBytes);
canvasOne.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
surfOne.flush();
canvasTwo.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
surfTwo.flush();
canvasThree.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
surfThree.flush();
window.requestAnimationFrame(thirdFrame);
}
function thirdFrame() {
canvasOne.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
surfOne.flush();
canvasTwo.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
surfTwo.flush();
canvasThree.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
surfThree.flush();
img.delete();
}
window.requestAnimationFrame(firstFrame);
}
function ContextSharingExample(CanvasKit) {
const img = CanvasKit.MakeLazyImageFromTextureSource(imageEle);
const surfOne = CanvasKit.MakeWebGLCanvasSurface("api4");
const surfTwo = CanvasKit.MakeWebGLCanvasSurface("api5");
const surfThree = CanvasKit.MakeWebGLCanvasSurface("api6");
let i = 0;
function drawFrame(canvas) {
canvas.drawImageCubic(img, 5+i, 5+i, 0.3, 0.3, null);
i += 1
if (i >= 3) {
if (i > 60) {
img.delete();
return;
}
if (i % 2) {
surfOne.requestAnimationFrame(drawFrame);
} else {
surfTwo.requestAnimationFrame(drawFrame);
}
}
}
surfOne.requestAnimationFrame(drawFrame);
surfTwo.requestAnimationFrame(drawFrame);
surfThree.requestAnimationFrame(drawFrame);
}
</script>