All Draw Calls vs. Visible Canvas

Benchmark created on

Preparation HTML

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>
      Scroll Canvas Demo
    </title>
  </head>
  
  <body>
    <canvas id="scroll" width="400" height="600">
      hello
    </canvas>
  </body>

</html>

Setup

var myImage0 = new Image();
    myImage0.src = "http://media.dcentertainment.com/sites/default/files/comic-covers/10421_400x600.jpg"
    
    var myImage1 = new Image();
    myImage1.src = "http://4.bp.blogspot.com/_sXsgbp8X_zA/TKPoDFn6rKI/AAAAAAAAAEo/QKYmgxFhM6c/s1600/15554_400x600.jpg"
    
    var myImage2 = new Image();
    myImage2.src = "http://www.math.uwaterloo.ca/~hdesterc/websiteW/personal/pictures/argentina2003/200311-set8/images/200311-set8_4_400x600.jpg"
    
    var myImage3 = new Image();
    myImage3.src = "http://media.dcentertainment.com/sites/default/files/book-covers/1788_400x600.jpg"
    
    var canvas = document.getElementById('scroll');
    var ctx = canvas.getContext('2d');
    
    var deltaX = Math.random() * (2000) - 400

Test runner

Ready to run.

Testing in
TestOps/sec
Checking if it is visible
if (deltaX >= -400 && deltaX <= 400) {
  ctx.drawImage(myImage0, 0, 0);
};
if (deltaX >= 0 && deltaX <= 800) {
  ctx.drawImage(myImage1, 400, 0);
};
if (deltaX >= 400 && deltaX <= 1200) {
  ctx.drawImage(myImage2, 800, 0);
};
if (deltaX >= 800 && deltaX <= 1600) {
  ctx.drawImage(myImage3, 1200, 0);
};
ready
Don't check, draw everything
ctx.drawImage(myImage0, 0, 0);
ctx.drawImage(myImage1, 400, 0);
ctx.drawImage(myImage2, 800, 0);
ctx.drawImage(myImage3, 1200, 0);
ready

Revisions

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