Performance problems with HTML5 Canvas in some mobile browsers.

Question

Hi I have a Webapp that should be able to run on both Smartphone and Desktop Browsers alike. While I was expecting to get some curious behaviour on small devices like the Ip

Answer 1

Depending on what you are drawing, the most common performance improvement strategy with Html5 canvas is to utilize layers (i.e. multiple canvases) and only update the layers that need to be redrawn, rather than redrawing the whole thing on each animation frame. You can roll something like this yourself, or you could use something like http://www.concretejs.com/ which is a lightweight Html5 canvas framework that enables peripheral things like hit detection, layering, caching, pixel ratio support, downloads, etc. You would do something like this:

var wrapper = new Concrete.Wrapper({
  width: 500,
  height: 300,
  container: el
});

var layer1 = new Concrete.Layer();
var layer2 = new Concrete.Layer();

wrapper.add(layer1).add(layer2);

// something happens which requires you to redraw layer2, but not layer1...
layer2.sceneCanvas.context.fillStyle = 'red';
layer2.sceneCanvas.context.fillRect(0, 0, 200, 100);