diff --git a/examples/icon-sprite-webgl.js b/examples/icon-sprite-webgl.js
index 3f6ceaaf4e..dfaeb8e220 100644
--- a/examples/icon-sprite-webgl.js
+++ b/examples/icon-sprite-webgl.js
@@ -80,7 +80,7 @@ var vector = new ol.layer.Vector({
 });
 
 var map = new ol.Map({
-  renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new ol.View({
diff --git a/examples/layer-clipping-webgl.js b/examples/layer-clipping-webgl.js
index 0a16b56205..70b4d99c7f 100644
--- a/examples/layer-clipping-webgl.js
+++ b/examples/layer-clipping-webgl.js
@@ -19,7 +19,7 @@ if (!ol.has.WEBGL) {
 
   var map = new ol.Map({
     layers: [osm],
-    renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     target: 'map',
     controls: ol.control.defaults({
       attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
diff --git a/examples/side-by-side.js b/examples/side-by-side.js
index e62aba39a7..4567fdfb25 100644
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -22,7 +22,7 @@ var map1 = new ol.Map({
 if (ol.has.WEBGL) {
   var map2 = new ol.Map({
     target: 'webglMap',
-    renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     layers: [layer],
     view: view
   });
diff --git a/examples/symbol-atlas-webgl.js b/examples/symbol-atlas-webgl.js
index 672a371020..dccb014246 100644
--- a/examples/symbol-atlas-webgl.js
+++ b/examples/symbol-atlas-webgl.js
@@ -107,7 +107,7 @@ var vector = new ol.layer.Vector({
 });
 
 var map = new ol.Map({
-  renderer: /** @type {ol.renderer.Type} */ ('webgl'),
+  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new ol.View({