CODEWITHSUNDEEP
performancehtml5-canvas
chchrist
chchrist

Reputation: 19812

Performance considerations using html elements on top of canvas

It is known that if you have html elements (for example a modal window with lists) on top of a flash element you have huge performance issues cause flash cause the browser to repaint the any html on top of it while the flash is animating. I wonder if the same happens if you have html elements on top of an animating canvas element.

I am asking this cause I am building a canvas game and I wonder if it is a good idea to make the GUI (menus, navigation buttons etc) using DOM and not drawing it on canvas.

Upvotes: 1

Views: 431

Answers (2)

wendelbsilva
wendelbsilva

Reputation: 772

I just tested using Chromium Version 28.0.1500.45 Mageia.Org 3 (205727) and the elements are NOT repainted while my canvas animates.

I tried this simple box animation with a DIV over it. After that, I profiled my application to see what was happening. I noticed only the canvas was 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, I tried to make the DIV repaint by selecting the text. This time yes, the DIV repainted.

Here's a screenshot of the profile. enter image description here

1: We can se the Paint (600x586) being called everytime I do my animation.

2: It called Paint for the DIV element ONLY when I selected the text.

I personally do not believe any other browser would have a different behavior than that.

Upvotes: 2

user1693593
user1693593

Reputation:

Yes, putting other DOM elements on top of a canvas element will reduce its performance.

This is because the browser have to do extra clipping when updating canvas / painting.

The canvas need to update 60 times per second to output to screen. If something is on top it needs to be clipped just as many times. If the DOM element is repainted as well will be browser dependent but the performance of the canvas element itself is reduced.

Usually the DOM paints happens in a single thread (but is about to change for most major browsers) so if there is extra load on that thread it will affect everything else being drawn too.

And there is the single-threading of JavaScript which is necessary to use to update canvas. If canvas has reduced performance than the script executing its changes (as well as changes to the DOM) will get hit too.

Upvotes: 1

Related Questions