From fc6b0786428c846a8d1e153bbc9ca8f00f524c6e Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 5 Apr 2016 11:01:11 +0200 Subject: [PATCH 1/4] Use ol.dom.createCanvasContext2D in ol.style.RegularShape --- src/ol/style/regularshapestyle.js | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/ol/style/regularshapestyle.js b/src/ol/style/regularshapestyle.js index b59b452b2a..32c9217f9c 100644 --- a/src/ol/style/regularshapestyle.js +++ b/src/ol/style/regularshapestyle.js @@ -4,6 +4,7 @@ goog.require('goog.asserts'); goog.require('ol'); goog.require('ol.color'); goog.require('ol.colorlike'); +goog.require('ol.dom'); goog.require('ol.has'); goog.require('ol.render.canvas'); goog.require('ol.style.AtlasManager'); @@ -354,18 +355,13 @@ ol.style.RegularShape.prototype.render_ = function(atlasManager) { if (atlasManager === undefined) { // no atlas manager is used, create a new canvas - this.canvas_ = /** @type {HTMLCanvasElement} */ - (document.createElement('CANVAS')); - - this.canvas_.height = size; - this.canvas_.width = size; + var context = ol.dom.createCanvasContext2D(size, size); + this.canvas_ = context.canvas; // canvas.width and height are rounded to the closest integer size = this.canvas_.width; imageSize = size; - var context = /** @type {CanvasRenderingContext2D} */ - (this.canvas_.getContext('2d')); this.draw_(renderOptions, context, 0, 0); this.createHitDetectionCanvas_(renderOptions); @@ -465,15 +461,9 @@ ol.style.RegularShape.prototype.createHitDetectionCanvas_ = function(renderOptio // if no fill style is set, create an extra hit-detection image with a // default fill style - this.hitDetectionCanvas_ = /** @type {HTMLCanvasElement} */ - (document.createElement('CANVAS')); - var canvas = this.hitDetectionCanvas_; + var context = ol.dom.createCanvasContext2D(renderOptions.size, renderOptions.size); + this.hitDetectionCanvas_ = context.canvas; - canvas.height = renderOptions.size; - canvas.width = renderOptions.size; - - var context = /** @type {CanvasRenderingContext2D} */ - (canvas.getContext('2d')); this.drawHitDetectionCanvas_(renderOptions, context, 0, 0); }; From 38718ee5e6dccee69439ddf5ae80d5373beb04bc Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 5 Apr 2016 11:08:58 +0200 Subject: [PATCH 2/4] Use ol.dom.createCanvasContext2D in ol.style.Circle --- src/ol/style/circlestyle.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/ol/style/circlestyle.js b/src/ol/style/circlestyle.js index 71846f2631..a073ee8c1b 100644 --- a/src/ol/style/circlestyle.js +++ b/src/ol/style/circlestyle.js @@ -4,6 +4,7 @@ goog.require('goog.asserts'); goog.require('ol'); goog.require('ol.color'); goog.require('ol.colorlike'); +goog.require('ol.dom'); goog.require('ol.has'); goog.require('ol.render.canvas'); goog.require('ol.style.Fill'); @@ -268,18 +269,14 @@ ol.style.Circle.prototype.render_ = function(atlasManager) { if (atlasManager === undefined) { // no atlas manager is used, create a new canvas - this.canvas_ = /** @type {HTMLCanvasElement} */ - (document.createElement('CANVAS')); - this.canvas_.height = size; - this.canvas_.width = size; + var context = ol.dom.createCanvasContext2D(size, size); + this.canvas_ = context.canvas; // canvas.width and height are rounded to the closest integer size = this.canvas_.width; imageSize = size; // draw the circle on the canvas - var context = /** @type {CanvasRenderingContext2D} */ - (this.canvas_.getContext('2d')); this.draw_(renderOptions, context, 0, 0); this.createHitDetectionCanvas_(renderOptions); @@ -369,15 +366,9 @@ ol.style.Circle.prototype.createHitDetectionCanvas_ = function(renderOptions) { // if no fill style is set, create an extra hit-detection image with a // default fill style - this.hitDetectionCanvas_ = /** @type {HTMLCanvasElement} */ - (document.createElement('CANVAS')); - var canvas = this.hitDetectionCanvas_; + var context = ol.dom.createCanvasContext2D(renderOptions.size, renderOptions.size); + this.hitDetectionCanvas_ = context.canvas; - canvas.height = renderOptions.size; - canvas.width = renderOptions.size; - - var context = /** @type {CanvasRenderingContext2D} */ - (canvas.getContext('2d')); this.drawHitDetectionCanvas_(renderOptions, context, 0, 0); }; From f645d81fee7217694034f442e6f062011fcea13c Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 5 Apr 2016 11:20:42 +0200 Subject: [PATCH 3/4] Use ol.dom.createCanvasContext2D in ol.source.ImageStatic --- src/ol/source/imagestaticsource.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/ol/source/imagestaticsource.js b/src/ol/source/imagestaticsource.js index 2d046d1c17..d9844f1501 100644 --- a/src/ol/source/imagestaticsource.js +++ b/src/ol/source/imagestaticsource.js @@ -5,6 +5,7 @@ goog.require('ol.events.EventType'); goog.require('ol.Image'); goog.require('ol.ImageLoadFunctionType'); goog.require('ol.ImageState'); +goog.require('ol.dom'); goog.require('ol.extent'); goog.require('ol.proj'); goog.require('ol.source.Image'); @@ -78,17 +79,16 @@ ol.source.ImageStatic.prototype.handleImageChange = function(evt) { imageWidth = this.imageSize_[0]; imageHeight = this.imageSize_[1]; } else { - imageWidth = image.width; - imageHeight = image.height; + // TODO: remove the type cast when a closure-compiler > 20160315 is used. + // see: https://github.com/google/closure-compiler/pull/1664 + imageWidth = /** @type {number} */ (image.width); + imageHeight = /** @type {number} */ (image.height); } var resolution = ol.extent.getHeight(imageExtent) / imageHeight; var targetWidth = Math.ceil(ol.extent.getWidth(imageExtent) / resolution); if (targetWidth != imageWidth) { - var canvas = /** @type {HTMLCanvasElement} */ - (document.createElement('canvas')); - canvas.width = targetWidth; - canvas.height = /** @type {number} */ (imageHeight); - var context = canvas.getContext('2d'); + var context = ol.dom.createCanvasContext2D(targetWidth, imageHeight); + var canvas = context.canvas; context.drawImage(image, 0, 0, imageWidth, imageHeight, 0, 0, canvas.width, canvas.height); this.image_.setImage(canvas); From f2c30cffe2895b9bdec314a563d63e43eed49ba3 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Tue, 5 Apr 2016 11:22:48 +0200 Subject: [PATCH 4/4] Use ol.dom.createCanvasContext2D in ol.style.AtlasManager --- src/ol/style/atlasmanager.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/ol/style/atlasmanager.js b/src/ol/style/atlasmanager.js index e1c2021630..35526bc6dc 100644 --- a/src/ol/style/atlasmanager.js +++ b/src/ol/style/atlasmanager.js @@ -3,6 +3,7 @@ goog.provide('ol.style.AtlasManager'); goog.require('goog.asserts'); goog.require('ol'); +goog.require('ol.dom'); /** * Provides information for an image inside an atlas manager. @@ -286,19 +287,15 @@ ol.style.Atlas = function(size, space) { /** * @private - * @type {HTMLCanvasElement} + * @type {CanvasRenderingContext2D} */ - this.canvas_ = /** @type {HTMLCanvasElement} */ - (document.createElement('CANVAS')); - this.canvas_.width = size; - this.canvas_.height = size; + this.context_ = ol.dom.createCanvasContext2D(size, size); /** * @private - * @type {CanvasRenderingContext2D} + * @type {HTMLCanvasElement} */ - this.context_ = /** @type {CanvasRenderingContext2D} */ - (this.canvas_.getContext('2d')); + this.canvas_ = this.context_.canvas; };