Canvas Draw Check

Benchmark created on

Description

check if the image will be in canvas view before rendering it to the canvas, is that extra bit of math worth it?

Preparation HTML

<canvas width="480" height="320"></canvas>

Setup

var can = document.getElementsByTagName("canvas")[0];
    var ctx = can.getContext('2d');
    var count = 1000;
    var size = 64; // size of image
    var x, y; // the position we will draw the image to our canvas
    
    var img = new Image();
    img.src = 'http://placekitten.com/' + size + '/' + size;
    
    function rand(min, max)
    {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

Test runner

Ready to run.

Testing in
TestOps/sec
draw
for ( var i = 0; i < count; i++ )
{
  x = rand(-200, 680);
  y = rand(-200, 520);
  ctx.drawImage(img, x, y);
}
ready
check
for ( var i = 0; i < count; i++ )
{
  x = rand(-200, 680);
  y = rand(-200, 520);

  if ( x + size < 0 || x > 480 )
    continue;
  if ( y + size < 0 || y > 320 )
    continue;

  ctx.drawImage(img, x, y);
}
ready

Revisions

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