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