JavaScript detect if hardware acceleration is enabled

Question

Is it possible to detect to see if a browser has support for hardware accelerated page rendering and is it also possible to see if it has been enabled? I am aware that Firefox 4, IE9 and Chrome support it, but it may or may not be enabled due to the version of the browser, the OS, and the computer hardware itself.

Is this possible using some form of DOM sniffing?

Driest

Even if hardware acceleration is enabled, how would you detect which operations are accelerated? – Yonatan

Answer 1

Like all other browser-specific capabilities, probably the best thing you can do is to devise some sort of feature test and actually measure the performance of what matters to you.

You can do when the first page on your site is loaded and then set a cookie with the setting so you only have to do it every once-in-a-while and don't have to do it again for awhile as long as the cookie is present.

Depending upon what type of performance you care the most about, you can devise a test that's pretty specific to that. For example if you cared a lot about image scaling, you could devise a JS test that scales an image among a bunch of different sizes in a big enough loop to get a measurable time and then decide what your timing threshold is.

Not only would this be better than a single binary choice of accelaration on or off, but it would also be able to test the specific features you care about and be able to see how fast they actually are.

Spectatress

#15311394 – Aggrieved

Answer 2

There won't be any official way to detect that. The thing is, even when the browser's Hardware Acceleration (HWA) setting is set, you can't be sure that the browser will actually use HWA for your rendering. A bunch of circumstances may prevent the use of HWA at a given moment and your graphic could be rendered through the software renderer even if HWA is normally supported (this is mainly true for Firefox, but other browsers may also have software rendering fallbacks for when HWA is temporarily unavailable).

What you can try though, is to render something you'd expect a software renderer and an HWA renderer would render differently, and force the software renderer to compare with the default one. The canvas 2D API offers a mean to force rendering through the software renderer: willReadFrequently, and HWA is known to be pretty bad at rendering clean obliques.

const hasHWA = (() => {
  // create a test function for both "default" drawing and forced software
  const test = (force=false) => {
    // Firefox (at lest on macOS) doesn't accelerate OffscreenCanvas
    const canvas = document.createElement("canvas");
    // willReadFrequently will force software rendering
    const ctx = canvas.getContext("2d", { willReadFrequently: force });
    ctx.moveTo(0, 0),
    ctx.lineTo(120, 121); // HWA is bad at obliques
    ctx.stroke();
    return ctx.getImageData(0, 0, 200, 200).data.join();
  };
  // check that both return different results
  return test(true) !== test(false);
})();
console.log({ hasHWA });

But while this may work in most cases (works in my FF and Chrome on macOS), it's certainly not bullet proof, since the ultimate goal is to have HWA renderers as precise as software ones, so use this test with caution.

Knucklebone

Answer 3

I recently discovered a handy command-line switch for Chrome (I am using v. 16.0.912) that results in red borders being painted around HTML (CSS3) elements that are actually being hardware accelerated. You can read more details in a blog that I have published on this subject.

Trajan

blog is removed – Trysail