| <!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> |
| |
| <script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script> |
| <script type="text/javascript" charset="utf-8"> |
| const cdn = 'https://storage.googleapis.com/skia-cdn/misc/'; |
| |
| const ckLoaded = CanvasKitInit({locateFile: (file) => '/node_modules/canvaskit/bin/'+file}); |
| const loadTestImage = fetch(cdn + 'test.png').then((response) => response.arrayBuffer()); |
| |
| Promise.all([ckLoaded, loadTestImage]).then((results) => {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(); |
| } |
| |
| window.requestAnimationFrame(firstFrame); |
| |
| } |
| </script> |
