Abandoned post by Unregistered user.

I have encountered a problem while developing a dashboard which is supposed to run on a Raspberry Pi 3. It is a combination of a HTML5 canvas as background to create visuals and some simple elements with CSS transitions on top of that.

I have noticed very bad performance (low framerate) during the tests on the device itself, which lead me to believe that the canvas was the reason for the drastic fps drop. I temporarily removed it and was surprised, that the performance didn't improve at all.

I have found following post on this forum, which sadly wasn't able to help me but may be valuable for someone reading this: Why is my simple HTML Canvas rendering only 11fps in Chromium a Pi3? (I have tested the answer given by a user but it resulted in even worse frame rate)

Another important thing to mention is that I have a constant symbol of "undervoltage" on the top right corner since I am using a standard micro-USB cable. It's possible that this is the main reason contributing to the poor performance but i have ordered a official power supply and hope to see better results. I will be able to update this post in a few days.

  • Perhaps your code is bad in general? Bad code can run OK on the desktop, but when you're trying to run it on ta considerably less performant platform, your coding is exposed? Without code of course, I'm only speculating Aug 3, 2018 at 2:26
  • I assumed the same as you did so I made the most simple canvas I could imagine: moving a rectangle by a few pixel every frame, which concluded in equally bad results. I tested other websites with a canvas, same thing. Aug 3, 2018 at 10:02
  • I received the new power supply today and it improved the performance unbelievably. Still not 100% happy so I will continue to try out things but this has been a big step so far... Aug 3, 2018 at 10:05
  • Abandoned post by Unregistered user.
    – Milliways
    Dec 19, 2023 at 0:19

2 Answers 2


This question was asked back when chromium was not hardware accelerated (much).
But for those who have the same problem nowadays, this will enable hardware acceleration:

  1. Run sudo raspi-config in the terminal.
  2. Select "Advanced options" using the down arrow key and pressing Enter.
  3. Select "GL Driver"
  4. Select "GL (Fake KMS)"
  5. Exit raspi-config by selecting "Finish". Reboot for the changes to take effect.

translate3d can "force" hardware acceleration. It's a trick web developers use for responsive design. They found it particularly useful to force GPU on smartphones. Turns out it works pretty well for the Pi as well. Use that in your CSS instead of translate.

  • transform: translateZ(0);
  • transform: translate3d(0,0,0);
  • perspective: 1000; backface-visibility: hidden;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.