HTML5 Canvas Performance

This is driving me crazy, because nothing I try changes anything, and I don't know why.

On my last pc, some month ago, I worked with a HD2600XT and Firefox 4. Ghost shooter demo: 10 fps.

FishIE Tank: 33 fps

On my new pc I had only an on-board-graphic chip (NVIDIA 7025) with the newest driver and Firefox 6.

Ghost shooter demo: 10 fps.

FishIE Tank: 29 fps

A friend of mine was so kind to give me his old card, a 9400GS. Still Firefox 6 and newest driver.

Ghost shooter demo: 10 fps.

FishIE Tank: 32 fps

Scott Porter's Canvas Performance Test: 48 fps

It doesn't help if people tell that they are able to run at 60 fps, because if their computer is powerful enough, it might reach that value without hardware support. And I can't find any message, if Firefox is using the hardware or not.

1) Why does it appear to have no hardware support, although it should?

2) Why is the ghost shooter demo so slow, while a HTML5 3D Canvas Test results in 48 fps?

3) Why does it seem, that no matter the cpu and gpu, I always get approx. the same rates?

Test pages used:

FishIE Tank

Scott Porter's Canvas Performance Test

EDIT: I also tested the on-board-chip and the current card with a project in CC. On-board chip 400 fps, new card 1400 fps

And I can't find any message, if Firefox is using the hardware or not.

I'm confident Firefox uses hardware acceleration since version 4. There is an option for it in the preferences. Should be under the advanced tab and say "use hardware acceleration when available" or something similar.

Your similarly bad results are a bit on the weird side indeed though. What are the complete specs of the systems you tried? You seemed to have the strongest GPU on your old pc with the HD2600XT.

My last test, which is a bit outdated, indicated that Firefox is only doing an average job with HTML5, with IE9 in the performance lead followed by chrome (I think they may have switched places by now).

Did you try your luck with other browsers also? There may be a performance difference to be experienced.

To modify configuration stuff as hardware acceleration, etc... in firefox, put "about:config" in the url bar.

Also make sure that in tools/options/advanced "Use harware acceleration when available" is checked.

This should give you some leads for firefox.

For the ghost shooter, I believe it is the fullscreen options that eats FPS.

On my PC it runs at 11 FPS in FF6.

Modify, in the project properties of the ghostshooter.capx, the property "fullscreen in browser" to "no". 20 FPS announced, but the game feels more fluid to me.

Also FF is known to execute HTML5 slower than chrome and/or IE9.

Ninja'd by Rebirth

Yeah, you should resize the ghost shooter window to the same size as the other tests to keep it fair.

Firefox 4+ uses hardware acceleration, but only if your drivers are up to date. Go Firefox menu -> Help -> Troubleshooting information, and under "Graphics", check "Direct2D enabled" is "true".

Firefox 6 seems a fair bit faster than Firefox 4 - in some of my tests, it actually has come out the fastest of all browsers. Different browsers are good at different things.

Thank you for the fast replies!

With "can't find any message, if Firefox is using the hardware or not" I meant some feedback from fierfox, that it found the hardware and will be using it. That's where Ashleys tip was very helpful!

Firefox 4+ uses hardware acceleration, but only if your drivers are up to date. Go Firefox menu -> Help -> Troubleshooting information, and under "Graphics", check "Direct2D enabled" is "true".

I did so and following is the text file created from 'Troubleshooting'. It's a german version, but the important part is under 'Grafik' (= Graphics). There is no item where it says, "Direct2D enabled". The very last entry says "GPU-accelerated windows" and lists 1 with Direct3D 9, but that's all I could find about acceleration at all:

[EDIT] I also used 'about:config' to find anything about Direct2D. I found this entry: gfx.direct2d.disabled;false [/EDIT]

Allgemeine Informationen

        Name

        Firefox

        Version

        6.0.2

        User-Agent

        Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2

        Profilordner

          Beinhaltenden Ordner anzeigen

        Aktivierte Plugins

          about:plugins

        Build-Konfiguration

          about:buildconfig

Erweiterungen

        Name

        Version

        Aktiviert

        ID

        Adblock Plus

        1.3.9

        true

        {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}

        Download Statusbar

        0.9.8

        true

        {D4DD63FA-01E4-46a7-B6B1-EDAB7D6AD389}

        DownloadHelper

        4.9.5

        true

        {b9db16a4-6edc-47ec-a1f4-b86292ed211d}

        Java Quick Starter

        1.0

        true

        jqsqsw@sun.com

        Microsoft .NET Framework Assistant

        0.0.0

        true

        {20a82645-c095-46ed-80e3-08825760534b}

        Java Console

        6.0.24

        false

        {CAFEEFAC-0016-0000-0024-ABCDEFFEDCBA}

        Java Console

        6.0.26

        false

        {CAFEEFAC-0016-0000-0026-ABCDEFFEDCBA}

        Mehr Leistung und Videoformate f?r dein HTML5 <video>

        2.1.2.126

        false

        {23fcfd51-4958-4f00-80a3-ae97e717ed8b}

Modifizierte Einstellungen

      Name

      Wert

        accessibility.typeaheadfind.flashBar

        0

        browser.places.importBookmarksHTML

        false

        browser.places.importDefaults

        false

        browser.places.leftPaneFolderId

        -1

        browser.places.migratePostDataAnnotations

        false

        browser.places.smartBookmarksVersion

        2

        browser.places.updateRecentTagsUri

        false

        browser.startup.homepage

        about:home

        browser.startup.homepage_override.buildID

        20110902133214

        browser.startup.homepage_override.mstone

        rv:6.0.2

        extensions.lastAppVersion

        6.0.2

        network.cookie.prefsMigrated

        true

        places.database.lastMaintenance

        1316176172

        places.history.expiration.transient_current_max_pages

        64400

        privacy.donottrackheader.enabled

        true

        privacy.sanitize.migrateFx3Prefs

        true

        security.warn_viewing_mixed

        false

Grafik

        Karten-Beschreibung

        NVIDIA GeForce 9400 GT

        Vendor-ID

        10de

        Ger?te-ID

        0641

        Karten-Ram

        Unknown

        Karten-Treiber

        nv4_disp

        Treiber-Version

        6.14.12.8026

        Treiber-Datum

        8-3-2011

        WebGL-Renderer

        Google Inc. -- ANGLE -- OpenGL ES 2.0 (ANGLE 0.0.0.686)

        GPU-beschleunigte Fenster

        1/1 Direct3D 9

Oh, Direct2D isn't available on Windows XP, I forgot. It's part of DX10 for Vista+ only. Duh! Well, I'm not sure how to tell then.

Out of interest, what's the lowest FPS for the Space Blaster game? At times, it drops to around 11 or 12 FPS when screen is busy for me.

Space Blaster is deliberately designed to exercise hardware acceleration by having tonnes of sprites and explosions. It's perfectly possible to make games that run well even on software rendering!

HTML5 will run fast in every major browser pretty soon. Of course the hardware and OS combination probably won't be allowed to be too outdated. I'm actually more worried about mobile performance. That should improve too once the technology gets more popular.

From my second little HTML5 performance test one could roughly talk about an average 44,2% improvement regarding the five biggest browsers in the last 6 months. If this keeps going, we are on a good path. <img src="smileys/smiley1.gif" border="0" align="middle">

The topic wasn't meant to say anything about or against C2. Its whole purpose was to see if I could get help here for a more general problem. I still doubt that Firefox really is using the hardware to accelerate the canvas.

I can see this in little issues. For example, FishIE Tank is nothing more than a background with lots of fish spritrs running fullscreen. How come that the framerate jumps to certain values back and forth? I mean, there are no in between steps, it starts at ca. 32 fps, after a second it instantly jumps up to 60, half a second later it falls back to 32, a second later it falls down to 15, and then that whole loop repeats again and again.

Out of interest, what's the lowest FPS for the Space Blaster game? At times, it drops to around 11 or 12 FPS when screen is busy for me.Where can I see the framerate in the online demo?

HTML5 will run fast in every major browser pretty soon. Of course the hardware and OS combination probably won't be allowed to be too outdated. I'm actually more worried about mobile performance. That should improve too once the technology gets more popular.

From my second little HTML5 performance test one could roughly talk about an average 44,2% improvement regarding the five biggest browsers in the last 6 months. If this keeps going, we are on a good path. <img src="smileys/smiley1.gif" border="0" align="middle"> And now it becomes even more mysterious: I followed your link and tried the sun-demo (Nice blog, btw!). According to your explanations and comparing my system with your system, that demo would need to run significantly slower for me than you experienced. May PC is just an older Athlon II with 3 GHz, the gfx card just a NVIDIA 9400 GS. But guess what? I had 46 fps instead of your 32 fps. Significantly higher.

I mean, all I want is having a simple backdrop with 50 sprites in fullscreen running at 60 fps. With DirectX I can manage to do this with more than 1000 fps, so I don't think it is overcharging (and btw, Minecraft is javascript, too. It runs with solid 130 fps in FullHD-Fullscreen). I just don't know, where to start looking for the causes. Is it javascript? Is it Win XP? I know C2s demo is by far the slowest, but on the other hand I experience issues with demos too, that weren't created with C2 (although less processing hungry). So it isn't C2. It might be that a problem with javascript will be somehow enhanced through C2, which would be a good thing, as it would serve as an indicator to the robustness of the underlying javascript language.

So, it seems, there is no solution to this obvious problem I'm experiencing?

DirectX uses specific functions of the gpu.

Also minecraft is java if I'm not mistaken, not javascript.

It seems that using windows7 and chrome or IE provides the better performance with html5 games.

I'm using firefox on XP, and games aren't THAT fluid on it, but it's fine by me. (c2 runtimes seems to run better than HTML5 demos though)

Browsers will keep on evolving. Firefox has promised about a 40% improvement of its performance by march 2012 (even sooner). The browsers war still emulates improvement on their part.

So apart from changing your OS/gear, I'm not sure there's more to do but use chrome (best overall performances apparently) and wait for the browsers next updates.

It it a matter of time.

Also minecraft is java if I'm not mistaken, not javascript.

Kyatric is right, Minecraft is written in Java not Javascript. Java is more comparable to C++ as a language, and almost as fast, so you can't really compare Java's performance to Javascript.

Performance is a complicated thing. Whether or not hardware acceleration is enabled depends on a number of factors, including the browser version, the OS, your actual hardware, your driver version, and so on. Hardware acceleration is never guaranteed to be enabled - Firefox 6 doesn't like my old GeForce Go 7600, so disabled hardware acceleration even with the latest drivers. However, IE9 (of course, not available on XP...) doesn't mind and still used hardware acceleration. Worse, it's often hard to tell, since FPS rates vary and browsers have a number of places hardware acceleration can be used, e.g. in rendering ordinary HTML documents, but not covering the canvas element itself!

To further complicate it, different browsers, systems and hardware have different performance characteristics - regardless of whether hardware acceleration is enabled, different systems can still get very different framerates, because they're good at different things. And by "system" I mean the entire system from your physical graphics card right the way up to the browser software version.

TL;DR - when it comes to performance don't expect anything. Maybe try some different browsers and stick to whatever works best for you.

I get 0-4 fps on ghost shooter.

Using latest versions of Firefox and Chrome

DirectX uses specific functions of the gpu.

Of course it does. That's what "hardware accelerated" means ;)

Also minecraft is java if I'm not mistaken, not javascript.

My bad. I mixed it up. Sorry about that.

Well, if it turns out that browsers in general don't reach stable 60 fps yet, it kind of relieves me. I really thought it is just an issue with my pc again.

I don't see why I should buy some expensive hi-end graphic card just to be able to see 60 fps in low resolution canvas-games, when my current equipment is fully capable of doing it. I mean, it even runs flash games with highest demands and sizes solely based on the cpu with stable 30 fps. I expect at least the same power from HTML5.

So I will wait just a little longer. (I don't like google, that's why I won't install chrome, I'll stick to firefox)

It's still fairly early days for HTML5 - hopefully if you wait a few months, support will improve and everyone will have great framerates.