normal vs flipped canvas draw (v2)

Revision 2 of this benchmark created by F_S on

Preparation HTML

<img id="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AsBDQAlJZhnlAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACUSURBVDjLtZQxEoAwCASFsbD0q77Er1ranUUUkUBCCqkYhj0SSCAA02NEJL6OR0aSpMnaXK0bbpORBAEQ8ji34qzLnlF5CwpZm6sFIAVHKmOwkeBMhagFP1ROGsvo6rN1B9aq3L0IJwcrEXEA8FCHNOm87eiFlriB5/yFDTkwKrfzbMTcJB38LI/kMnD/M+f3Tp1wAbs6YSHsID+BAAAAAElFTkSuQmCC"></img>

<canvas id="canvas"></canvas>
<canvas id="canvas_f"></canvas>

Setup

var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var img = document.getElementById('image');
    
    canvas.width = 20;
    canvas.height = 20;
    
    var canvas_f = document.getElementById('canvas_f');
    var ctx_f = canvas_f.getContext('2d');
    
    canvas_f.width = 20;
    canvas_f.height = 20;
    
    ctx_f.translate(((img.width / 2) * 2), 0);
    ctx_f.scale(-1, 1);

Test runner

Ready to run.

Testing in
TestOps/sec
normal draw
ctx.drawImage(img, 0, 0);
ready
horizontally flipped draw
ctx.save(); 
ctx.translate(((img.width / 2) * 2), 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0);
ctx.restore();
ready
horizontally flipped draw (prepared canvas)
ctx_f.drawImage(img, 0, 0);
 
ready

Revisions

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