Performance considerations using html elements on top of canvas -

it known if have html elements (for example modal window lists) on top of flash element have huge performance issues cause flash cause browser repaint html on top of while flash animating. wonder if same happens if have html elements on top of animating canvas element.

i asking cause building canvas game , wonder if idea make gui (menus, navigation buttons etc) using dom , not drawing on canvas.

i tested using chromium version 28.0.1500.45 mageia.org 3 (205727) , elements not repainted while canvas animates.

i tried this simple box animation div on it. after that, profiled application see happening. noticed canvas being repainted.

window.requestanimframe = (function(callback) {   return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe ||   function(callback) {     window.settimeout(callback, 1000 / 60);   }; })(); var gx = 0; function animate() {   var canvas = document.getelementbyid('jaja');   var context = canvas.getcontext('2d');   // update   gx += 10;   if (gx > 500) gx = 0;   // clear   context.clearrect(0, 0, canvas.width, canvas.height);   // draw stuff   context.beginpath();   context.rect(gx, 10, 100, 100);   context.fillstyle = '#8ed6ff';   context.fill();   context.linewidth = 1;   context.strokestyle = 'black';   context.stroke();   requestanimframe(function() {     animate();   }); }  // request new frame 

following, tried make div repaint selecting text. time yes, div repainted.

here's screenshot of profile.

1: can se paint (600x586) being called everytime animation.

2: called paint div element when selected text.

i not believe other browser have different behavior that.