Skip to content

Instantly share code, notes, and snippets.

@OmarShehata

OmarShehata/bitmap.html

Last active February 5, 2019 21:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save OmarShehata/e6ba7d56cc711eafb99b1c17c14e05b0 to your computer and use it in GitHub Desktop.
Save OmarShehata/e6ba7d56cc711eafb99b1c17c14e05b0 to your computer and use it in GitHub Desktop.
Download ZIP
Benchmark for createImageBitmap. Live version: http://omarshehata.me/static/bitmap.html
Raw
bitmap.html
<!DOCTYPE html>
<html>
<head>
<title>createImageBitmap</title>
</head>
<style>
canvas {
width:100%;
height:100%;
}
html, body {
margin:0px;
padding:0px;
}
#info {
font-size:20px;
}
</style>
<body>
<div class="info">createImageBitmap took: <span id="label">(loading)</span> ms.</div>
<div class="info">decoding took: <span id="label2">(loading)</span> ms.</div>
<div class="info">drawing took: <span id="label3">(loading)</span> ms.</div>
<canvas></canvas>
<script>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
let image = new Image();
image.onload = function() {
var t0 = performance.now();
createImageBitmap(image)
.then(function(im) {
var t2 = performance.now();
console.log("Finished decoding in", (t2 - t0));
document.querySelector("#label2").innerHTML = Math.round(t2 - t0);
ctx.drawImage(im, 0, 0, canvas.width, canvas.height);
document.querySelector("#label3").innerHTML = Math.round(performance.now() - t0);
})
.catch(console.error);
var t1 = performance.now();
console.log("createImageBitmap took", Math.round(t1 - t0));
document.querySelector("#label").innerHTML = Math.round(t1 - t0);
}
image.src = 'world.jpg';
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment