Merge pull request #1928 from ahocevar/recover-from-canvas-too-big

Recover from situations where the maximum canvas size is exceeded

src/ol/renderer/canvas/canvaslayerrenderer.js

@@ -1,5 +1,6 @@
 goog.provide('ol.renderer.canvas.Layer');
 
+goog.require('goog.array');
 goog.require('goog.vec.Mat4');
 goog.require('ol.layer.Layer');
 goog.require('ol.render.Event');
@@ -163,3 +164,37 @@ ol.renderer.canvas.Layer.prototype.getTransform = function(frameState) {
       -view2DState.rotation,
       -view2DState.center[0], -view2DState.center[1]);
 };
+
+
+/**
+ * @param {CanvasRenderingContext2D} context Context.
+ * @param {ol.Size} size Size.
+ * @return {boolean} True when the canvas with the current size does not exceed
+ *     the maximum dimensions.
+ */
+ol.renderer.canvas.Layer.testCanvasSize = (function() {
+
+  /**
+   * @type {ImageData}
+   */
+  var testImageData = null;
+
+  return function(context, size) {
+    var x = size[0] - 1;
+    var y = size[1] - 1;
+    var originalImageData = context.getImageData(x, y, 1, 1);
+    if (goog.isNull(testImageData)) {
+      testImageData = context.createImageData(1, 1);
+      var data = testImageData.data;
+      data[0] = 42;
+      data[1] = 84;
+      data[2] = 126;
+      data[3] = 255;
+    }
+    context.putImageData(testImageData, x, y);
+    var result = context.getImageData(x, y, 1, 1);
+    var good = goog.array.equals(testImageData.data, result.data);
+    context.putImageData(originalImageData, x, y);
+    return good;
+  };
+})();

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -44,6 +44,12 @@ ol.renderer.canvas.TileLayer = function(mapRenderer, tileLayer) {
    */
   this.canvasSize_ = null;
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.canvasTooBig_ = false;
+
   /**
    * @private
    * @type {CanvasRenderingContext2D}
@@ -203,17 +209,23 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
     this.canvas_ = context.canvas;
     this.canvasSize_ = [canvasWidth, canvasHeight];
     this.context_ = context;
+    this.canvasTooBig_ =
+        !ol.renderer.canvas.Layer.testCanvasSize(context, this.canvasSize_);
   } else {
     goog.asserts.assert(!goog.isNull(this.canvasSize_));
     goog.asserts.assert(!goog.isNull(this.context_));
     canvas = this.canvas_;
     context = this.context_;
     if (this.canvasSize_[0] < canvasWidth ||
-        this.canvasSize_[1] < canvasHeight) {
-      // Canvas is too small, make it bigger
+        this.canvasSize_[1] < canvasHeight ||
+        (this.canvasTooBig_ && (this.canvasSize_[0] > canvasWidth ||
+        this.canvasSize_[1] > canvasHeight))) {
+      // Canvas is too small or too big, resize it
       canvas.width = canvasWidth;
       canvas.height = canvasHeight;
       this.canvasSize_ = [canvasWidth, canvasHeight];
+      this.canvasTooBig_ =
+          !ol.renderer.canvas.Layer.testCanvasSize(context, this.canvasSize_);
       this.renderedCanvasTileRange_ = null;
     } else {
       canvasWidth = this.canvasSize_[0];