Question

In a simple canvas test I created for performance and quality measurement purposes, a canvas is painted with randomised colors and images during an unlimited period.

A sample is shown here: http://litterific.com/minisite/

Warning: Only open this in Opera or Chrome, the script is pretty heavy can hang up on slow computers, don’t leave the script running while you are getting coffee ;)) It is just a rough prototype and did not optimize it.

What I noticed here is that the results as painted by the script (js/asset.js) are different in various browsers. Especially in Opera there is much more “green” in the painting than in Chrome

code is found here: http://litterific.com/minisite/js/asset.js

My question is:

How this is caused. Different random seeds? Different rounding or different color behavior in Opera?

Note: It is exactly the same script in both browsers, so perhaps you could have a look at it in both Chrome and Opera.

Answer 1

It’s not random numbers causing the problems, it’s “funny” pixel data. Here’s the change:

for (i = 0, n = pixels.data.length; i < n; i += 4){
  pixels.data[i + 0] = Math.max(0, Math.min(255, Math.floor(r * f)));
  pixels.data[i + 1] = Math.max(0, Math.min(255, Math.floor(g * f)));
  pixels.data[i + 2] = 0;
  pixels.data[i + 3] = pixels.data[i + 3]; 
}

If you ensure that the pixel values are integers in the right range, Opera works fine.

Oh also, and this is probably obvious, it goes a lot faster if you hoist those multiplications out of the loop.