canvas drawImage from multiple canvas to one canvas slow in chrome

问题

I want to draw a big map with +10k objects in canvas. The objects are basically many circles (maybe up to 10 different colors, all same size) and few individually shaped polygons. I also need to pan and zoom the map.

I focused on just drawing the circles for now and tried many different implementations according to the recommendations made here.

Having one off-screen canvas at full resolution as buffer and using drawImageto crop out the current viewport and draw it on my on-screen canvas, worked well until I hit the iPhone size restriction at 16M pixels. I decided to split the buffer canvas and call drawImagefor every buffer canvas that intersects the viewport (see graphic).

This works very well on safari, firefox and is also very fast on the iPhone safar, but is really slow in Chrome.

This is the code that is called in the animation frame (but only if something has changed), which is causing the lags.

console.time("copy");
buffers = this.getBuffersInViewport(vp);
for(var i = 0; i < buffers.length; i++){
  var buffer = buffers[i];
  var sx = Math.round(Math.max(0,vp.minX - buffer.minX));
  var sy = Math.round(Math.max(0,vp.minY - buffer.minY));
  var sWidth = Math.round(buffer.width - sx);
  var sHeight = Math.round(buffer.height - sy);
  var dx = Math.round(Math.max(0,buffer.minX-vp.minX) * vp.scale);
  var dy = Math.round(Math.max(0,buffer.minY-vp.minY) * vp.scale);
  var dWidth = Math.round(sWidth * vp.scale);
  var dHeight = Math.round(sHeight * vp.scale);    
  this.context.drawImage(buffer,sx,sy,sWidth,sHeight,
    dx,dy,dWidth,dHeight);
}
console.timeEnd("copy");

Results of the console.time: Chrome: ~200ms Safari: ~0.5ms Firefox: ~10ms Brave: ~200ms

It seems that I'm doing something that the chrome engine doesn't like. I would rather fix this for chrome, instead of changing the lgoic of my application again.

来源：https://stackoverflow.com/questions/43628923/canvas-drawimage-from-multiple-canvas-to-one-canvas-slow-in-chrome

标签

javascript

html5

canvas