Run results for: Canvas vs img

Run details:

User agent: Mozilla/5.0 (Linux; Android 7.0; SM-N920V) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Mobile Safari/537.36 OPR/62.3.3146.57763

Browser: Opera Mobile 62

Operating system: Android 7.0

Device Platform: Mobile

Date tested: 2 years ago

img

4K/s

canvas

0/s

View exact numbers

Test name	Executions per second
✓ img	3,541 Ops/sec
canvas	0 Ops/sec

HTML Preparation code:

<canvas id="mycanvas" width="300" height="265" style='background: green'></canvas>

<img id="myimage" width="256" height="256" alt='' src='#' style='background: gray'></img>

Script Preparation code:

var i1 = "https://web-dev.imgix.net/image/T4FyVKpzu4WKF1kBNvXepbi08t52/uBEYI93uReLt091i15rF.png?auto=format&w=256"
var i2 = "https://bulma.io/images/placeholders/256x256.png"
var img1 = new Image()
img1.src = i1;

var img2 = new Image()
img2.src = i2;

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');

var img = document.getElementById("myimage");

Tests:

canvas
ctx.drawImage(img1, 0, 0, 256, 256); ctx.drawImage(img2, 0, 0, 256, 256);
img
img.src = i1; img.src = i2