Serialize canvas

JavaScript performance comparison

Test case created by tbenst

Preparation code

<canvas id="mycanvas"></canvas>
      
<script>
Benchmark.prototype.setup = function() {
  var canvas=document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  const WIDTH = 500;
  const HEIGHT = 500;
  context.canvas.width  = WIDTH;
  context.canvas.height = HEIGHT;
  context.fillStyle = "black"
  context.fillRect(0,0,WIDTH,HEIGHT)
  
  var offscreen = new OffscreenCanvas(WIDTH, HEIGHT);
  var offContext = offscreen.getContext("2d");
  offContext.fillStyle = "black"
  offContext.fillRect(0,0,WIDTH,HEIGHT)

};
</script>

Preparation code output

<canvas id="mycanvas"></canvas>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
offscreen convertToBlob
// async test
offscreen.convertToBlob().then(
  blob => deferred.resolve()
)
pending…
toDataURL
canvas.toDataURL()
pending…
toBlob
// async test
canvas.toBlob( blob => deferred.resolve() )
pending…
grab buffer
context.getImageData(0, 0, WIDTH, HEIGHT).data.buffer;
pending…
Offscreen transferToImageBitmap
offscreen.transferToImageBitmap()
pending…
createImageBitmap
//createImageBitmap(canvas, 0, 0, WIDTH, HEIGHT).then(
//  blob => deferred.resolve()
//)
fail
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments