Why is my simple HTML Canvas rendering only 11fps in Chromium a Pi3?

Question

I've written some simple HTML games for my kids on the Pi. The latest one uses a Canvas but the performance is terrible (and I get the yellow "running hot" square).

I measured by code running in my render loop but it takes < 1ms per frame; yet the framerate was 4fps!

I stripped everything back to a really basic canvas that I just clear and render the framerate too and I get an appalling 11fps. I presume it's not hardware accelerated but that still seems incredibly poor for what's being done here (on my Chromebook I still get 60fs with hardware acceleration disabled).

Here's a full sample HTML page which I'm loading in Chromium on the Pi3. Is it normal to get 11fps? Can I do anything to improve it?

<canvas width="1920" height="1080"></canvas>
<script>
// Set up canvas + 2D context
var c = document.querySelector("canvas");
var ctx = c.getContext('2d');
ctx.fillStyle = "black";

// Start render loop
frames = 0;
startTime = performance.now();
tick();

function tick(ms) {
    // Clear canvas before rendering
    ctx.clearRect(0, 0, c.width, c.height);

    // Calculate framerate
    var time = (ms - startTime)/1000;
    var fps = frames++/time;

    // Output framerate to canvas
    ctx.fillText(fps, 100, 100);

    // Request next frame
    requestAnimationFrame(tick);
}
</script>

And a runnable jsfiddle: https://jsfiddle.net/0upg2b99/. On my desktop and Chromebook I get 60fps so I'm sure the maths is correct.

Edit:

I'm using Raspbian Jessie Lite with Chromium 49 installed like this:

wget http://launchpadlibrarian.net/249903476/chromium-browser_49.0.2623.108-0ubuntu0.14.04.1.1113_armhf.deb
wget http://launchpadlibrarian.net/249903480/chromium-codecs-ffmpeg-extra_49.0.2623.108-0ubuntu0.14.04.1.1113_armhf.deb
wget http://launchpadlibrarian.net/237755896/libgcrypt11_1.5.3-2ubuntu4.3_armhf.deb
sudo dpkg -i chromium-browser_49.0.2623.108-0ubuntu0.14.04.1.1113_armhf.deb  chromium-codecs-ffmpeg-extra_49.0.2623.108-0ubuntu0.14.04.1.1113_armhf.deb libgcrypt11_1.5.3-2ubuntu4.3_armhf.deb
sudo apt-get -f install -y

I'm running it using startx (I don't have a desktop environment):

tee ~/.xinitrc > /dev/null <<EOF
xset s off                                              # don't activate screensaver
xset -dpms                                              # disable DPMS (Energy Star) features.
xset s noblank                                          # don't blank the video device
setxkbmap -model pc105 -layout gb       # Fix keyboard mapping
unclutter &                                             # Hide mouse pointer after inactivity
chromium-browser --start-fullscreen --start-maximized --kiosk http://localhost/
EOF

startx

I've checked the Chrome flags, and hardware acceleration for canvas is enabled. Disabling it made no difference. Enabling the flag that claims to override the GPU blacklist and use the blacklist anyway made it worse. Enabling canvas rendering list(?) also made no difference.

Answer 1

Enable the experimental 3D driver via raspi-config , it will improve performance. Note that this driver does not support video acceleration yet (which was added to Chromium for Raspbian in 2017).