Benchmark: 【JiangNanGame】ctx.drawImage(HTMLImageElement) VS ctx.drawImage(HTMLCanvasElement)

HTML Preparation code:

<canvas id='app' width='1920' height='1080'></canvas>

Script Preparation code:

const canvas = document.getElementById('app');
window.ctx = canvas.getContext('2d');

window.image = new Image();
image.src = `https://img2.baidu.com/it/u=2716120127,557879455&fm=253&fmt=auto&app=138&f=JPG?w=965&h=500`;

window.tempCanvas = document.createElement('canvas');

tempCanvas.width = 965;
tempCanvas.height = 500;

tempCanvas.getContext('2d').drawImage(image, 0, 0);

Tests:

ctx.drawImage(HTMLImageElement)
for (let i = 0; i < 1000; i++) { ctx.drawImage(image, 0, 0); ctx.clearRect(0, 0, 1920, 1080); }
ctx.drawImage(HTMLCanvasElement)
for (let i = 0; i < 1000; i++) { ctx.drawImage(tempCanvas, 0, 0); ctx.clearRect(0, 0, 1920, 1080); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ctx.drawImage(HTMLImageElement)
ctx.drawImage(HTMLCanvasElement)

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

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

Related benchmarks:

【JiangNanGame】ctx.drawImage(HTMLImageElement) VS ctx.drawImage(HTMLCanvasElement) (version: 2)

Comparing performance of: ctx.drawImage(HTMLImageElement) vs ctx.drawImage(HTMLCanvasElement)

Created: 2 years ago by: Registered User

Jump to the latest result

ctx.drawImage(HTMLImageElement)

ctx.drawImage(HTMLCanvasElement)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results