HTML5 Canvas rendering issue in Firefox

Doing a benchmark on canvas rendering performance in both firefox and chrome.

From a normal user perspective

• The Chrome runs very smooth in rendering.
• The Firefox runs very slow and have some hiccups.

But when I check on the resources usage

• The Chrome itself takes more resources, but the Xorg usuage seems very light.
• The Firefox itself takes half of the resources as chrome, but it jack up the Xorg usuage by alomst 1000% (10 times) 

It gives me a suspicious that, when Firefox rendering the canvas, it tries to make use of the operating system / hardware capabilities to render the canvas ( in other words, off-load the works to the OS or the hardware acceleration), which may in return slow down the rendering capabilities of the browser.

Well, please correct me if this suspicious is not correct :)

Below is the "top" result when I run my testing, and the result is quite consistent.

  PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND          
 1317 root      20   0 86604  25m  11m R   66  0.7   5:22.87 Xorg            
 2376 ryu       20   0  464m 129m  34m S   59  3.7   4:08.18 firefox-bin      

  PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND
 3594 ryu       20   0  142m  34m  15m R  100  1.0   0:24.03 chrome          
 1317 root      20   0 79428  26m  12m S    6  0.8   5:33.05 Xorg

...

For those of you who just want to increase the performance of Firefox canvas rendering, try using the suggestion in the following blog.

http://blog.anderson.geek.nz/2011/04/17/improving-firefox-html-canvas-performance/

For Chrome before 11, the canvas 2d is not using hardware acceleration, but you can turn that on, please try the following blog.

http://downloadsquad.switched.com/2011/03/03/speed-up-google-chrome-by-enabling-hardware-acceleration-and-pre/