Benchmark: drawImage: Copy from image or canvas

HTML Preparation code:

<canvas id="target" width="200" height="200"></canvas>

Script Preparation code:

var imagebase = "data:image/png;base64,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";

var image = document.createElement('img');
image.src = imagebase;
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
var imageloaded = false;
var imageBitmap;
image.onload = function() {
  ctx.drawImage(image, 0, 0);
  imageloaded = true;
  imageBitmap = await createImageBitmap(image)
};

var drawcanvas = document.getElementById('target');
var drawctx = drawcanvas.getContext('2d');

Tests:

copy image section
drawctx.drawImage(image, 50, 50, 120, 120, 5, 5, 120, 120);
copy canvas section
drawctx.drawImage(canvas, 50, 50, 120, 120, 5, 5, 120, 120);
copy imageBitmap
drawctx.drawImage(imageBitmap, 50, 50, 120, 120, 5, 5, 120, 120);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
copy image section
copy canvas section
copy imageBitmap

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

drawImage: Copy from image or canvas (version: 0)

Comparing performance of: copy image section vs copy canvas section vs copy imageBitmap

Created: 6 years ago by: Guest

Jump to the latest result

copy image section

copy canvas section

copy imageBitmap

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

No previous run results