| <!DOCTYPE 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> |
