Learning D3.js 5 Mapping - Second Edition

Optimizing performance

Remember that we've used two canvases for this visual, one canvas to draw the static background scene with the map and the airports and one canvas for the dynamic flight animation. We did this because it kept drawing concerns separate.

Another reason for using an additional canvas is increased performance. We can use one canvas as an in-memory buffer to pre-render elements and just copy its contents onto the main visible canvas. This saves render costs as drawing on a visible canvas is less performant than drawing on a non-visible canvas to then copy over the image to the main canvas. Performance further rejoices as the context's drawImage() method we will use to copy over the image from the buffer to the display canvas, ...