dataURL vs canvas elements

Benchmark created by Andy Wilson on April 12, 2017

Preparation HTML

<canvas id="canvas" width="300" height="300" style="width:300px; height:300px;">

<canvas id="new-canvas" width="300" height="300" style="width:300px; height:300px;">

Setup

canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  imageData = ctx.createImageData(300, 300);
  for (var i=0; i<300*300; i++){
     imageData.data[i*4+0]=Math.round(Math.random()*255);
     imageData.data[i*4+1]=Math.round(Math.random()*255);
     imageData.data[i*4+2]=Math.round(Math.random()*255);
     imageData.data[i*4+3]=255;
  }
  ctx.putImageData(imageData, 0, 0);
  imageDataURL = canvas.toDataURL();
  
  newCanvas = document.getElementById("new-canvas");

Test runner

newImage = new Image();
newImage.src = imageDataURL;

newContext = newCanvas.getContext("2d");
newContext.drawImage(newImage, 0, 0, newImage.width, newImage.height);

newImageDataURL = newCanvas.toDataURL();

newContext = newCanvas.getContext("2d");
newContext.drawImage(canvas, 0, 0, canvas.width, canvas.height);

Revisions

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

• Revision 1: published by Andy Wilson on April 12, 2017