OpenLayers with Canvas

Currently OpenLayers has already a vector renderer ( OpenLayers.Renderer.Canvas) that uses the HTML element  Canvas. There are also experiments using Canvas for rendering raster layers:  Transition Example.

This Wiki page will present results of performance evaluations comparing SVG and Canvas.

Vector Layers

Performance evaluation

A small test suite has been built to run the tests:  performance-tests

Test cases

• display features
• select feature
• modify feature operations: add/delete/ move/rotation/add vertices/.. ?
• pan/zoom (several times)
• different map sizes
• different feature count
• ?

Test environment

• on different browsers
• Test data: Local GeoJSON files
  •  World Countries Boundaries
  • Randomly created geometries (Points/Lines/Polygons/Mixed)

First results/notes

Test data:  World Countries Boundaries
Map size: 800 px x 800 px
Browser: Chromium 5.0.342.9

Test Case	Canvas	SVG	Canvas (with R-Tree)
Display layer	67 ms	215 ms	365ms
Display layer and pan 10 times	1192 ms	380 ms	1531ms
Display layer and zoom 10 times	1174 ms	1181 ms	1531ms
Select feature	158 ms	0 ms	12ms

The shown numbers are the average of 10 test runs.

Notes:

• Canvas is fast! Displaying a layer for the first times is up to 3-times faster than SVG.
• But once the layer is drawn, panning is faster with SVG. The Canvas renderer simply redraws the whole layer every time the map is panned, SVG seems to profit from some internal optimization.
• Zooming takes approx. the same time for SVG and Canvas.
• Selecting features is much faster in SVG. This is because in SVG you can set click- and hover-events on geometries inside the SVG element. But for Canvas the method Canvas.getFeatureIdFromEvent(evt) has to loop all geometries to check if a bounding-box around the mouse pointer intersects the geometry. For large data sets this gets a performance problem especially when hovering, when the method is executed on every mouse move. A spatial index like  R-Tree Library for Javascript could improve the performance.

Analysis

• Why is which renderer (on which browser?) faster? For which test cases?
• Memory consumption?
• When to use which renderer?
• Mobile Browsers and SVG?
• Size of the map (see  Performance of Canvas versus SVG)?
• Just display features or also select (and edit) features?
• ?

Raster Layers

Experiments:

•  Transition Example
•  Integrating Openlayers and HTML5 Canvas