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