Integer pixels improve performance significantly

[grelf]

I have recently discovered a couple of useful pages about improving the speed of canvas operations. I will give links to those pages at the bottom of this item but first let me describe a good speed-up I got as a result of reading them.

In my program The Forest (myforest.uk) I am continually looking for ways to improve the speed of drawing scenes. I have made several improvements already but this new one is very useful indeed.

I have a Scene object with method draw() which is invoked whenever the observer moves or turns. From its earliest incarnation this method has reported how long it takes, so I can monitor what is going on. Its first line is

    var t0 = new Date ().getTime (); // ms
    
and its last line calculates a difference and displays it in a status line on the HTML page:

    var dt = new Date ().getTime () - t0;
    forest.infoDiv.innerHTML = me.toString () + ", Drawn in " + dt + "ms (" + this.nDrawIms + " images)";

I have augmented that so that the constructor of forest.scene includes

    this.drawingTimes = '';

and a new final line at the end of draw():
    
    this.drawingTimes += dt + '<br>';
    
I can cause drawing of the same scene over and over again by clicking a button labelled 'Look level' (as opposed to up or down buttons which would draw a slightly different view of the scene). This means I can build up a long string of forest.scene.drawingTimes. Then in a testing version I can press an otherwise unused key to dump those times as the innerHTML of a div in my HTML test page. The <br>s mean that I get a vertical column of values which I can then select, copy and paste into a spreadsheet (I use OpenOffice). Then it is easy to get the mean and standard deviation of the column.

I did that twice for a large number of values. First with my last released version of The Forest and then with a tiny enhancement so that just before every time drawImage(im, x, y, width, height) is called I do this:

    x |= 0; y |= 0;
    
Those are bitwise OR operations and their effect is simply to chop off the fractional parts of the screen coordinates x and y. This means that drawing starts on an exact pixel and does not require interpolation.

The results:

    without the truncation (ORing) the mean time was 140.9ms with a standard deviation of 35.3ms;
    truncated the mean was 85.7ms and standard deviation 23.7ms.
    
That is a very significant and useful improvement, so it will be going into my next version.

The scene drawn here involved 1,693 calls to drawImage(), scaling each image (tree, ground, and other features) differently each time. From this big improvement I deduce that once drawImage() starts on an integer pixel then it uses integer pixels in the destination to decide where to get pixels from in the original image for scaling.

In hindsight this is rather obvious really but I thought it would be useful to others to see how I went about proving the effect.

I have noted before in this forum that the drawing time varies quite widely (as shown by the standard deviations) and I still attribute that to the workings of the garbage collector in the background.

I should also point out that so far I have only measured this in FireFox.

If you want to see more clearly what I am taking about, The Forest is at www.myforest.uk - from the initial map use the button (or key) to go to the scene.

The pages which prompted this are:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
https://www.html5rocks.com/en/tutorials/canvas/performance/