Fix memory leak in CanvasImageRenderer when rendering a VectorLayer with renderMode: 'image'.

Added tests to CanvasImageLayerRenderer for this issue.

src/ol/renderer/canvas/ImageLayer.js

@@ -80,6 +80,7 @@ CanvasImageLayerRenderer['create'] = function(mapRenderer, layer) {
       const candidate = /** @type {Object.<string, Function>} */ (candidates[i]);
       if (candidate !== CanvasImageLayerRenderer && candidate['handles'](RendererType.CANVAS, layer)) {
         renderer.setVectorRenderer(candidate['create'](mapRenderer, layer));
+        break;
       }
     }
   }
@@ -87,6 +88,17 @@ CanvasImageLayerRenderer['create'] = function(mapRenderer, layer) {
 };
 
 
+/**
+ * @inheritDoc
+ */
+CanvasImageLayerRenderer.prototype.disposeInternal = function() {
+  if (this.vectorRenderer_) {
+    this.vectorRenderer_.dispose();
+  }
+  IntermediateCanvasRenderer.prototype.disposeInternal.call(this);
+};
+
+
 /**
  * @inheritDoc
  */
@@ -210,6 +222,9 @@ CanvasImageLayerRenderer.prototype.forEachFeatureAtCoordinate = function(coordin
  * @param {ol.renderer.canvas.VectorLayer} renderer Vector renderer.
  */
 CanvasImageLayerRenderer.prototype.setVectorRenderer = function(renderer) {
+  if (this.vectorRenderer_) {
+    this.vectorRenderer_.dispose();
+  }
   this.vectorRenderer_ = renderer;
 };
 export default CanvasImageLayerRenderer;