Canvas to jpg

Benchmark created on

Preparation HTML

<canvas width="2160" height="3840">

Setup

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

for (var i = 0; i < imgData.data.length; i += 4) {
  imgData.data[i] = randomInt(0, 255); // red
  imgData.data[i+1] = randomInt(0, 255); // green
  imgData.data[i+2] = randomInt(0, 255); // blue
  imgData.data[i+3] = 255; // alpha
}

ctx.putImageData(imgData, 0, 0);

Test runner

Ready to run.

Testing in
TestOps/sec
HD
canvas.width = '720'
canvas.height = '1280'

return canvas.toDataURL('image/jpg')
ready
FHD
canvas.width = '1080'
canvas.height = '1980'

return canvas.toDataURL('image/jpg')
ready
4K
canvas.width = '2160'
canvas.height = '3840'

return canvas.toDataURL('image/jpg')
ready

Revisions

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