blob: 36636cba09278e7f42820b01fdb9ecb484f17981 [file] [log] [blame]
<!DOCTYPE html>
<title>Image Decoding Demo</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 {
border: 1px dashed grey;
}
.canvas-container {
float: left;
}
</style>
<body>
<h1>CanvasKit loading images in a webworker (using browser-based decoders)</h1>
<p>NOTE: this demo currently only works in chromium-based browsers, where
<a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#Browser_compatibility">
Offscreen Canvas
</a>
is supported.
</p>
<div class="canvas-container">
<h2>Decoding on main thread</h2>
<canvas id="main-thread-canvas" width=500 height=500></canvas>
<div>
<button id="load-button-main">Decode Image on Main Thread</button>
<button id="load-button-web">Decode Image with Web Worker</button>
<button id="clear-button">Clear Image</button>
</div>
<p>
Notice that decoding the image on the main thread pauses the circle animation until the
image is ready to be drawn, where as decoding it in a webworker does not have this pause
(or at least not as drastic a pause). You may want to reload the page, as browsers are
smart enough to not have to re-decode the image on subsequent requests.
</p>
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script>
<script type="text/javascript" src="main.js"></script>