1<!DOCTYPE html>
2<title>Image Decoding Demo</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 {
9    border: 1px dashed grey;
10  }
11
12  .canvas-container {
13    float: left;
14  }
15</style>
16
17<body>
18  <h1>CanvasKit loading images in a webworker (using browser-based decoders)</h1>
19  <p>NOTE: this demo currently only works in chromium-based browsers, where
20    <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#Browser_compatibility">
21      Offscreen Canvas
22    </a>
23    is supported.
24  </p>
25
26  <div class="canvas-container">
27    <h2>Decoding on main thread</h2>
28    <canvas id="main-thread-canvas" width=500 height=500></canvas>
29    <div>
30      <button id="load-button-main">Decode Image on Main Thread</button>
31      <button id="load-button-web">Decode Image with Web Worker</button>
32      <button id="clear-button">Clear Image</button>
33    </div>
34    <p>
35      Notice that decoding the image on the main thread pauses the circle animation until the
36      image is ready to be drawn, where as decoding it in a webworker does not have this pause
37      (or at least not as drastic a pause). You may want to reload the page, as browsers are
38      smart enough to not have to re-decode the image on subsequent requests.
39    </p>
40  </div>
41
42</body>
43<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script>
44<script type="text/javascript" src="main.js"></script>