Let's modify our example and add a renderer option to see what happens:
Open the example in your web browser. Right-click on the map and select Inspect Element to open the Web Inspector and see what OpenLayers creates in the web page to display the map.
You should see something like the following screenshot:
The inspector is highlighting the HTML element used to render the map. In this case, that element is the
<canvas>element. This element is used for both the WebGL and Canvas renderers. Let's see what happens when we change the renderer.Edit the example and change the map object constructor to use the DOM renderer, like this:
var map = new ol.Map({ target: 'map', view: view, layers: [layer], renderer: 'dom' });Save this and load it in your web browser. Right-click on the map and select Inspect Element to open the Web Inspector and see what has changed:
