xref: /aosp_15_r20/external/skia/modules/canvaskit/npm_build/multicanvas.html (revision c8dee2aa9b3f27cf6c858bd81872bdeb2c07ed17) 
1*c8dee2aaSAndroid Build Coastguard Worker<!DOCTYPE html>
2*c8dee2aaSAndroid Build Coastguard Worker<title>CanvasKit (Skia via Web Assembly)</title>
3*c8dee2aaSAndroid Build Coastguard Worker<meta charset="utf-8" />
4*c8dee2aaSAndroid Build Coastguard Worker<meta http-equiv="X-UA-Compatible" content="IE=edge">
5*c8dee2aaSAndroid Build Coastguard Worker<meta name="viewport" content="width=device-width, initial-scale=1.0">
6*c8dee2aaSAndroid Build Coastguard Worker
7*c8dee2aaSAndroid Build Coastguard Worker<style>
8*c8dee2aaSAndroid Build Coastguard Worker  canvas, img {
9*c8dee2aaSAndroid Build Coastguard Worker    border: 1px dashed #AAA;
10*c8dee2aaSAndroid Build Coastguard Worker  }
11*c8dee2aaSAndroid Build Coastguard Worker
12*c8dee2aaSAndroid Build Coastguard Worker</style>
13*c8dee2aaSAndroid Build Coastguard Worker
14*c8dee2aaSAndroid Build Coastguard Worker<canvas id=api1 width=300 height=300></canvas>
15*c8dee2aaSAndroid Build Coastguard Worker<canvas id=api2 width=300 height=300></canvas>
16*c8dee2aaSAndroid Build Coastguard Worker<canvas id=api3 width=300 height=300></canvas>
17*c8dee2aaSAndroid Build Coastguard Worker
18*c8dee2aaSAndroid Build Coastguard Worker<br>
19*c8dee2aaSAndroid Build Coastguard Worker
20*c8dee2aaSAndroid Build Coastguard Worker<img id="src" src="https://storage.googleapis.com/skia-cdn/misc/test.png"
21*c8dee2aaSAndroid Build Coastguard Worker  width=40 height=40 crossorigin="anonymous">
22*c8dee2aaSAndroid Build Coastguard Worker
23*c8dee2aaSAndroid Build Coastguard Worker<canvas id=api4 width=300 height=300></canvas>
24*c8dee2aaSAndroid Build Coastguard Worker<canvas id=api5 width=300 height=300></canvas>
25*c8dee2aaSAndroid Build Coastguard Worker<canvas id=api6 width=300 height=300></canvas>
26*c8dee2aaSAndroid Build Coastguard Worker
27*c8dee2aaSAndroid Build Coastguard Worker<script type="text/javascript" src="/build/canvaskit.js"></script>
28*c8dee2aaSAndroid Build Coastguard Worker<script type="text/javascript" charset="utf-8">
29*c8dee2aaSAndroid Build Coastguard Worker  const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
30*c8dee2aaSAndroid Build Coastguard Worker
31*c8dee2aaSAndroid Build Coastguard Worker  const ckLoaded = CanvasKitInit({locateFile: (file) => '/build/'+file});
32*c8dee2aaSAndroid Build Coastguard Worker  const loadTestImage = fetch(cdn + 'test.png').then((response) => response.arrayBuffer());
33*c8dee2aaSAndroid Build Coastguard Worker  const imageEle = document.getElementById("src");
34*c8dee2aaSAndroid Build Coastguard Worker
35*c8dee2aaSAndroid Build Coastguard Worker  Promise.all([ckLoaded, loadTestImage, imageEle.decode()]).then((results) => {
36*c8dee2aaSAndroid Build Coastguard Worker    ContextSharingExample(results[0]);
37*c8dee2aaSAndroid Build Coastguard Worker    MultiCanvasExample(...results);
38*c8dee2aaSAndroid Build Coastguard Worker  });
39*c8dee2aaSAndroid Build Coastguard Worker
40*c8dee2aaSAndroid Build Coastguard Worker  // This example shows how CanvasKit can automatically switch between multiple canvases
41*c8dee2aaSAndroid Build Coastguard Worker  // with different WebGL contexts.
42*c8dee2aaSAndroid Build Coastguard Worker  function MultiCanvasExample(CanvasKit, imgBytes) {
43*c8dee2aaSAndroid Build Coastguard Worker    const paint = new CanvasKit.Paint();
44*c8dee2aaSAndroid Build Coastguard Worker
45*c8dee2aaSAndroid Build Coastguard Worker    const surfOne = CanvasKit.MakeWebGLCanvasSurface("api1");
46*c8dee2aaSAndroid Build Coastguard Worker    const canvasOne = surfOne.getCanvas();
47*c8dee2aaSAndroid Build Coastguard Worker    const surfTwo = CanvasKit.MakeWebGLCanvasSurface("api2");
48*c8dee2aaSAndroid Build Coastguard Worker    const canvasTwo = surfTwo.getCanvas();
49*c8dee2aaSAndroid Build Coastguard Worker    const surfThree = CanvasKit.MakeWebGLCanvasSurface("api3");
50*c8dee2aaSAndroid Build Coastguard Worker    const canvasThree = surfThree.getCanvas();
51*c8dee2aaSAndroid Build Coastguard Worker
52*c8dee2aaSAndroid Build Coastguard Worker    function firstFrame() {
53*c8dee2aaSAndroid Build Coastguard Worker      paint.setColor(CanvasKit.Color4f(1, 0, 0, 1)); // red
54*c8dee2aaSAndroid Build Coastguard Worker      canvasOne.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
55*c8dee2aaSAndroid Build Coastguard Worker      surfOne.flush();
56*c8dee2aaSAndroid Build Coastguard Worker
57*c8dee2aaSAndroid Build Coastguard Worker      paint.setColor(CanvasKit.Color4f(0, 1, 0, 1)); // green
58*c8dee2aaSAndroid Build Coastguard Worker      canvasTwo.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
59*c8dee2aaSAndroid Build Coastguard Worker      surfTwo.flush();
60*c8dee2aaSAndroid Build Coastguard Worker
61*c8dee2aaSAndroid Build Coastguard Worker      paint.setColor(CanvasKit.Color4f(0, 0, 1, 1)); // blue
62*c8dee2aaSAndroid Build Coastguard Worker      canvasThree.drawRect(CanvasKit.LTRBRect(0, 0, 300, 300), paint);
63*c8dee2aaSAndroid Build Coastguard Worker      surfThree.flush();
64*c8dee2aaSAndroid Build Coastguard Worker
65*c8dee2aaSAndroid Build Coastguard Worker      window.requestAnimationFrame(secondFrame);
66*c8dee2aaSAndroid Build Coastguard Worker    }
67*c8dee2aaSAndroid Build Coastguard Worker
68*c8dee2aaSAndroid Build Coastguard Worker    let img;
69*c8dee2aaSAndroid Build Coastguard Worker    function secondFrame() {
70*c8dee2aaSAndroid Build Coastguard Worker      img = CanvasKit.MakeImageFromEncoded(imgBytes);
71*c8dee2aaSAndroid Build Coastguard Worker
72*c8dee2aaSAndroid Build Coastguard Worker      canvasOne.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
73*c8dee2aaSAndroid Build Coastguard Worker      surfOne.flush();
74*c8dee2aaSAndroid Build Coastguard Worker
75*c8dee2aaSAndroid Build Coastguard Worker      canvasTwo.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
76*c8dee2aaSAndroid Build Coastguard Worker      surfTwo.flush();
77*c8dee2aaSAndroid Build Coastguard Worker
78*c8dee2aaSAndroid Build Coastguard Worker      canvasThree.drawImageCubic(img, 10, 10, 0.3, 0.3, null);
79*c8dee2aaSAndroid Build Coastguard Worker      surfThree.flush();
80*c8dee2aaSAndroid Build Coastguard Worker
81*c8dee2aaSAndroid Build Coastguard Worker      window.requestAnimationFrame(thirdFrame);
82*c8dee2aaSAndroid Build Coastguard Worker    }
83*c8dee2aaSAndroid Build Coastguard Worker
84*c8dee2aaSAndroid Build Coastguard Worker    function thirdFrame() {
85*c8dee2aaSAndroid Build Coastguard Worker      canvasOne.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
86*c8dee2aaSAndroid Build Coastguard Worker      surfOne.flush();
87*c8dee2aaSAndroid Build Coastguard Worker
88*c8dee2aaSAndroid Build Coastguard Worker      canvasTwo.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
89*c8dee2aaSAndroid Build Coastguard Worker      surfTwo.flush();
90*c8dee2aaSAndroid Build Coastguard Worker
91*c8dee2aaSAndroid Build Coastguard Worker      canvasThree.drawImageCubic(img, 100, 100, 0.3, 0.3, null);
92*c8dee2aaSAndroid Build Coastguard Worker      surfThree.flush();
93*c8dee2aaSAndroid Build Coastguard Worker      img.delete();
94*c8dee2aaSAndroid Build Coastguard Worker    }
95*c8dee2aaSAndroid Build Coastguard Worker
96*c8dee2aaSAndroid Build Coastguard Worker    window.requestAnimationFrame(firstFrame);
97*c8dee2aaSAndroid Build Coastguard Worker  }
98*c8dee2aaSAndroid Build Coastguard Worker
99*c8dee2aaSAndroid Build Coastguard Worker  function ContextSharingExample(CanvasKit) {
100*c8dee2aaSAndroid Build Coastguard Worker    const img = CanvasKit.MakeLazyImageFromTextureSource(imageEle);
101*c8dee2aaSAndroid Build Coastguard Worker
102*c8dee2aaSAndroid Build Coastguard Worker    const surfOne = CanvasKit.MakeWebGLCanvasSurface("api4");
103*c8dee2aaSAndroid Build Coastguard Worker    const surfTwo = CanvasKit.MakeWebGLCanvasSurface("api5");
104*c8dee2aaSAndroid Build Coastguard Worker    const surfThree = CanvasKit.MakeWebGLCanvasSurface("api6");
105*c8dee2aaSAndroid Build Coastguard Worker
106*c8dee2aaSAndroid Build Coastguard Worker    let i = 0;
107*c8dee2aaSAndroid Build Coastguard Worker    function drawFrame(canvas) {
108*c8dee2aaSAndroid Build Coastguard Worker      canvas.drawImageCubic(img, 5+i, 5+i, 0.3, 0.3, null);
109*c8dee2aaSAndroid Build Coastguard Worker      i += 1
110*c8dee2aaSAndroid Build Coastguard Worker      if (i >= 3) {
111*c8dee2aaSAndroid Build Coastguard Worker        if (i > 60) {
112*c8dee2aaSAndroid Build Coastguard Worker          img.delete();
113*c8dee2aaSAndroid Build Coastguard Worker          return;
114*c8dee2aaSAndroid Build Coastguard Worker        }
115*c8dee2aaSAndroid Build Coastguard Worker        if (i % 2) {
116*c8dee2aaSAndroid Build Coastguard Worker          surfOne.requestAnimationFrame(drawFrame);
117*c8dee2aaSAndroid Build Coastguard Worker        } else {
118*c8dee2aaSAndroid Build Coastguard Worker          surfTwo.requestAnimationFrame(drawFrame);
119*c8dee2aaSAndroid Build Coastguard Worker        }
120*c8dee2aaSAndroid Build Coastguard Worker
121*c8dee2aaSAndroid Build Coastguard Worker      }
122*c8dee2aaSAndroid Build Coastguard Worker    }
123*c8dee2aaSAndroid Build Coastguard Worker
124*c8dee2aaSAndroid Build Coastguard Worker    surfOne.requestAnimationFrame(drawFrame);
125*c8dee2aaSAndroid Build Coastguard Worker    surfTwo.requestAnimationFrame(drawFrame);
126*c8dee2aaSAndroid Build Coastguard Worker    surfThree.requestAnimationFrame(drawFrame);
127*c8dee2aaSAndroid Build Coastguard Worker  }
128*c8dee2aaSAndroid Build Coastguard Worker
129*c8dee2aaSAndroid Build Coastguard Worker
130*c8dee2aaSAndroid Build Coastguard Worker</script>