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