From 95795ea301e7bb3a2e873aea3ac8b9cf5f5f015d Mon Sep 17 00:00:00 2001 From: ahocevar Date: Sun, 6 Apr 2014 11:38:51 +0200 Subject: [PATCH 1/3] Test canvas size with an untainted canvas --- src/ol/renderer/canvas/canvaslayerrenderer.js | 38 ++++++++++++------- .../canvas/canvastilelayerrenderer.js | 4 +- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/src/ol/renderer/canvas/canvaslayerrenderer.js b/src/ol/renderer/canvas/canvaslayerrenderer.js index 8ce6f7cc4b..1a956669a6 100644 --- a/src/ol/renderer/canvas/canvaslayerrenderer.js +++ b/src/ol/renderer/canvas/canvaslayerrenderer.js @@ -167,34 +167,46 @@ ol.renderer.canvas.Layer.prototype.getTransform = function(frameState) { /** - * @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 {HTMLCanvasElement} + */ + var canvas = null; + + /** + * @type {CanvasRenderingContext2D} + */ + var context = null; + /** * @type {ImageData} */ - var testImageData = null; + var imageData = 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; + return function(size) { + if (goog.isNull(canvas)) { + canvas = /** @type {HTMLCanvasElement} */ + (document.createElement('canvas')); + context = /** @type {CanvasRenderingContext2D} */ + (canvas.getContext('2d')); + imageData = context.createImageData(1, 1); + var data = imageData.data; data[0] = 42; data[1] = 84; data[2] = 126; data[3] = 255; } - context.putImageData(testImageData, x, y); + canvas.width = size[0]; + canvas.height = size[1]; + var x = size[0] - 1; + var y = size[1] - 1; + context.putImageData(imageData, 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; + return goog.array.equals(imageData.data, result.data); }; })(); diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js index 89b5e93f63..4ca50273e5 100644 --- a/src/ol/renderer/canvas/canvastilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js @@ -210,7 +210,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = this.canvasSize_ = [canvasWidth, canvasHeight]; this.context_ = context; this.canvasTooBig_ = - !ol.renderer.canvas.Layer.testCanvasSize(context, this.canvasSize_); + !ol.renderer.canvas.Layer.testCanvasSize(this.canvasSize_); } else { goog.asserts.assert(!goog.isNull(this.canvasSize_)); goog.asserts.assert(!goog.isNull(this.context_)); @@ -225,7 +225,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = canvas.height = canvasHeight; this.canvasSize_ = [canvasWidth, canvasHeight]; this.canvasTooBig_ = - !ol.renderer.canvas.Layer.testCanvasSize(context, this.canvasSize_); + !ol.renderer.canvas.Layer.testCanvasSize(this.canvasSize_); this.renderedCanvasTileRange_ = null; } else { canvasWidth = this.canvasSize_[0]; From 09021dffd4f743382b98db895a6778d18de12416 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Sun, 6 Apr 2014 14:29:32 +0200 Subject: [PATCH 2/3] Do not shrink test canvas --- src/ol/renderer/canvas/canvaslayerrenderer.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/ol/renderer/canvas/canvaslayerrenderer.js b/src/ol/renderer/canvas/canvaslayerrenderer.js index 1a956669a6..ccf4b8e1a3 100644 --- a/src/ol/renderer/canvas/canvaslayerrenderer.js +++ b/src/ol/renderer/canvas/canvaslayerrenderer.js @@ -201,12 +201,16 @@ ol.renderer.canvas.Layer.testCanvasSize = (function() { data[2] = 126; data[3] = 255; } - canvas.width = size[0]; - canvas.height = size[1]; - var x = size[0] - 1; - var y = size[1] - 1; - context.putImageData(imageData, x, y); - var result = context.getImageData(x, y, 1, 1); - return goog.array.equals(imageData.data, result.data); + var good = size[0] <= canvas.width && size[1] <= canvas.height; + if (!good) { + canvas.width = size[0]; + canvas.height = size[1]; + var x = size[0] - 1; + var y = size[1] - 1; + context.putImageData(imageData, x, y); + var result = context.getImageData(x, y, 1, 1); + good = goog.array.equals(imageData.data, result.data); + } + return good; }; })(); From d685c79e0284b77ca92b61da820a43f278006ef7 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Mon, 7 Apr 2014 13:25:49 +0200 Subject: [PATCH 3/3] Use ol.dom.createCanvasContext2D and remove canvas variable --- src/ol/renderer/canvas/canvaslayerrenderer.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/ol/renderer/canvas/canvaslayerrenderer.js b/src/ol/renderer/canvas/canvaslayerrenderer.js index ccf4b8e1a3..0479b796b1 100644 --- a/src/ol/renderer/canvas/canvaslayerrenderer.js +++ b/src/ol/renderer/canvas/canvaslayerrenderer.js @@ -2,6 +2,7 @@ goog.provide('ol.renderer.canvas.Layer'); goog.require('goog.array'); goog.require('goog.vec.Mat4'); +goog.require('ol.dom'); goog.require('ol.layer.Layer'); goog.require('ol.render.Event'); goog.require('ol.render.EventType'); @@ -173,11 +174,6 @@ ol.renderer.canvas.Layer.prototype.getTransform = function(frameState) { */ ol.renderer.canvas.Layer.testCanvasSize = (function() { - /** - * @type {HTMLCanvasElement} - */ - var canvas = null; - /** * @type {CanvasRenderingContext2D} */ @@ -189,11 +185,8 @@ ol.renderer.canvas.Layer.testCanvasSize = (function() { var imageData = null; return function(size) { - if (goog.isNull(canvas)) { - canvas = /** @type {HTMLCanvasElement} */ - (document.createElement('canvas')); - context = /** @type {CanvasRenderingContext2D} */ - (canvas.getContext('2d')); + if (goog.isNull(context)) { + context = ol.dom.createCanvasContext2D(1, 1); imageData = context.createImageData(1, 1); var data = imageData.data; data[0] = 42; @@ -201,6 +194,7 @@ ol.renderer.canvas.Layer.testCanvasSize = (function() { data[2] = 126; data[3] = 255; } + var canvas = context.canvas; var good = size[0] <= canvas.width && size[1] <= canvas.height; if (!good) { canvas.width = size[0];