javascripthtmlcanvashardware-acceleration

How to enable accelerated hardware in JavaScript for Canvas


How do I enable hardware acceleration for HTML5 canvas in JavaScript? Or is it not possible in JavaScript? I remember that I read somewhere about doing that using something CSS or Webgl but I cannot remember.


Solution

  • UPDATE: as mentioned in other answers, this is not the correct answer as the css trick doesn't influence 3d canvas.

    What you probably remember is the CSS 'trick' that triggers accelerated display even if you don't really do 3d yourself:

    A common way is using:

    transform: translateZ(0);
    

    in your css. (add the browser-prefixed versions if needed)

    Please note that this is by no means an officially supported way of switching on hardware acceleration, it's just an (undocumented?) side-effect in some browsers.