Use a single map in the canvas tiles example

examples/canvas-tiles.js

@@ -1,6 +1,6 @@
 goog.require('ol.Coordinate');
 goog.require('ol.Map');
-goog.require('ol.RendererHint');
+goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.projection');
@@ -9,41 +9,25 @@ goog.require('ol.source.OpenStreetMap');
 goog.require('ol.tilegrid.XYZ');
 
 
-var layers = [
-  new ol.layer.TileLayer({
-    source: new ol.source.OpenStreetMap()
-  }),
-  new ol.layer.TileLayer({
-    source: new ol.source.DebugTileSource({
-      projection: 'EPSG:3857',
-      tileGrid: new ol.tilegrid.XYZ({
-        maxZoom: 22
+var map = new ol.Map({
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.OpenStreetMap()
+    }),
+    new ol.layer.TileLayer({
+      source: new ol.source.DebugTileSource({
+        projection: 'EPSG:3857',
+        tileGrid: new ol.tilegrid.XYZ({
+          maxZoom: 22
+        })
       })
     })
-  })
-];
-
-var webglMap = new ol.Map({
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
   view: new ol.View2D({
     center: ol.projection.transform(
         new ol.Coordinate(-0.1275, 51.507222), 'EPSG:4326', 'EPSG:3857'),
     zoom: 10
-  }),
-  layers: layers,
-  renderer: ol.RendererHint.WEBGL,
-  target: 'webglMap'
+  })
 });
-
-var domMap = new ol.Map({
-  renderer: ol.RendererHint.DOM,
-  target: 'domMap'
-});
-domMap.bindTo('layers', webglMap);
-domMap.bindTo('view', webglMap);
-
-var canvasMap = new ol.Map({
-  renderer: ol.RendererHint.CANVAS,
-  target: 'canvasMap'
-});
-canvasMap.bindTo('layers', webglMap);
-canvasMap.bindTo('view', webglMap);