You may have noticed that dragging and zooming are sometimes slow and choppy. One of the main reasons this happens is the large amount of objects in memory. A large dataset can create hundreds of thousands of objects, draining your memory resources and freezing your animations.

But if you configure a path with the context() method and an HTML Canvas context, it will no longer generate an SVG path string, but a sequence of calls to HTML Canvas path methods.

The same dataset that creates thousands of SVG objects creates a single Canvas, which uses much less resources. On the other hand it's much harder to select object in a Canvas, apply styles and create interactive maps.

The following example is a Canvas-version of the map you created in the beginning of this chapter. Replace the code that creates and configures the SVG for one that creates and configures a Canvas...