Merge pull request #1934 from fredj/ol.dom.createCanvasContext

Add ol.dom.createCanvasContext function

src/ol/browserfeature.js

@@ -3,6 +3,7 @@ goog.provide('ol.BrowserFeature');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.userAgent');
+goog.require('ol.dom');
 goog.require('ol.webgl');
 
 
@@ -113,10 +114,7 @@ ol.BrowserFeature.HAS_CANVAS = ol.ENABLE_CANVAS && (
         return false;
       }
       try {
-        var canvas = /** @type {HTMLCanvasElement} */
-            (goog.dom.createElement(goog.dom.TagName.CANVAS));
-        var context = /** @type {CanvasRenderingContext2D} */
-            (canvas.getContext('2d'));
+        var context = ol.dom.createCanvasContext2D();
         if (goog.isNull(context)) {
           return false;
         } else {

src/ol/dom/dom.js

@@ -11,6 +11,24 @@ goog.require('goog.userAgent');
 goog.require('goog.vec.Mat4');
 
 
+/**
+ * Create an html canvas element and returns its 2d context.
+ * @param {number=} opt_width Canvas width.
+ * @param {number=} opt_height Canvas height.
+ * @return {CanvasRenderingContext2D}
+ */
+ol.dom.createCanvasContext2D = function(opt_width, opt_height) {
+  var canvas = goog.dom.createElement(goog.dom.TagName.CANVAS);
+  if (goog.isDef(opt_width)) {
+    canvas.width = opt_width;
+  }
+  if (goog.isDef(opt_height)) {
+    canvas.height = opt_height;
+  }
+  return canvas.getContext('2d');
+};
+
+
 /**
  * @enum {boolean}
  */

src/ol/layer/heatmaplayer.js

@@ -1,11 +1,10 @@
 goog.provide('ol.layer.Heatmap');
 
 goog.require('goog.asserts');
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.math');
 goog.require('ol.Object');
+goog.require('ol.dom');
 goog.require('ol.layer.Vector');
 goog.require('ol.render.EventType');
 goog.require('ol.style.Icon');
@@ -107,12 +106,9 @@ ol.layer.Heatmap.DEFAULT_GRADIENT = ['#00f', '#0ff', '#0f0', '#ff0', '#f00'];
  * @private
  */
 ol.layer.Heatmap.createGradient_ = function(colors) {
-  var canvas = goog.dom.createElement(goog.dom.TagName.CANVAS);
-  var context = canvas.getContext('2d');
   var width = 1;
   var height = 256;
-  canvas.width = width;
-  canvas.height = height;
+  var context = ol.dom.createCanvasContext2D(width, height);
 
   var gradient = context.createLinearGradient(0, 0, width, height);
   var step = 1 / (colors.length - 1);
@@ -135,11 +131,9 @@ ol.layer.Heatmap.createGradient_ = function(colors) {
  * @private
  */
 ol.layer.Heatmap.createCircle_ = function(radius, blur, shadow) {
-  var canvas =  /** @type {HTMLCanvasElement} */
-      (goog.dom.createElement(goog.dom.TagName.CANVAS));
-  var context = canvas.getContext('2d');
   var halfSize = radius + blur + 1;
-  canvas.width = canvas.height = halfSize * 2;
+  var size = 2 * halfSize;
+  var context = ol.dom.createCanvasContext2D(size, size);
   context.shadowOffsetX = context.shadowOffsetY = shadow;
   context.shadowBlur = blur;
   context.shadowColor = '#000';
@@ -147,7 +141,7 @@ ol.layer.Heatmap.createCircle_ = function(radius, blur, shadow) {
   var center = halfSize - shadow;
   context.arc(center, center, radius, 0, Math.PI * 2, true);
   context.fill();
-  return canvas.toDataURL();
+  return context.canvas.toDataURL();
 };
 
 

src/ol/render/canvas/canvasreplay.js

@@ -7,13 +7,12 @@ goog.provide('ol.render.canvas.ReplayGroup');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.object');
 goog.require('goog.vec.Mat4');
 goog.require('ol.BrowserFeature');
 goog.require('ol.array');
 goog.require('ol.color');
+goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.extent.Relationship');
 goog.require('ol.geom.flat.simplify');
@@ -1820,20 +1819,11 @@ ol.render.canvas.ReplayGroup = function(tolerance, maxExtent, resolution) {
    */
   this.replaysByZIndex_ = {};
 
-  /**
-   * @type {HTMLCanvasElement}
-   */
-  var hitDetectionCanvas = /** @type {HTMLCanvasElement} */
-      (goog.dom.createElement(goog.dom.TagName.CANVAS));
-  hitDetectionCanvas.width = 1;
-  hitDetectionCanvas.height = 1;
-
   /**
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.hitDetectionContext_ = /** @type {CanvasRenderingContext2D} */
-      (hitDetectionCanvas.getContext('2d'));
+  this.hitDetectionContext_ = ol.dom.createCanvasContext2D(1, 1);
 
   /**
    * @private

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -4,10 +4,10 @@ goog.provide('ol.renderer.canvas.Map');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.style');
 goog.require('goog.vec.Mat4');
 goog.require('ol.css');
+goog.require('ol.dom');
 goog.require('ol.layer.Image');
 goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
@@ -34,12 +34,18 @@ ol.renderer.canvas.Map = function(container, map) {
 
   goog.base(this, container, map);
 
+  /**
+   * @private
+   * @type {CanvasRenderingContext2D}
+   */
+  this.context_ = ol.dom.createCanvasContext2D();
+
   /**
    * @private
    * @type {HTMLCanvasElement}
    */
-  this.canvas_ = /** @type {HTMLCanvasElement} */
-      (goog.dom.createElement(goog.dom.TagName.CANVAS));
+  this.canvas_ = this.context_.canvas;
+
   this.canvas_.style.width = '100%';
   this.canvas_.style.height = '100%';
   this.canvas_.className = ol.css.CLASS_UNSELECTABLE;
@@ -51,13 +57,6 @@ ol.renderer.canvas.Map = function(container, map) {
    */
   this.renderedVisible_ = true;
 
-  /**
-   * @private
-   * @type {CanvasRenderingContext2D}
-   */
-  this.context_ = /** @type {CanvasRenderingContext2D} */
-      (this.canvas_.getContext('2d'));
-
   /**
    * @private
    * @type {!goog.vec.Mat4.Number}

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -5,8 +5,6 @@ goog.provide('ol.renderer.canvas.TileLayer');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.object');
 goog.require('goog.vec.Mat4');
 goog.require('ol.Size');
@@ -14,6 +12,7 @@ goog.require('ol.Tile');
 goog.require('ol.TileCoord');
 goog.require('ol.TileRange');
 goog.require('ol.TileState');
+goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.layer.Tile');
 goog.require('ol.renderer.Map');
@@ -200,12 +199,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame =
     goog.asserts.assert(goog.isNull(this.canvasSize_));
     goog.asserts.assert(goog.isNull(this.context_));
     goog.asserts.assert(goog.isNull(this.renderedCanvasTileRange_));
-    canvas = /** @type {HTMLCanvasElement} */
-        (goog.dom.createElement(goog.dom.TagName.CANVAS));
-    canvas.width = canvasWidth;
-    canvas.height = canvasHeight;
-    context = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'));
-    this.canvas_ = canvas;
+    context = ol.dom.createCanvasContext2D(canvasWidth, canvasHeight);
+    this.canvas_ = context.canvas;
     this.canvasSize_ = [canvasWidth, canvasHeight];
     this.context_ = context;
   } else {

src/ol/renderer/canvas/canvasvectorlayerrenderer.js

@@ -2,10 +2,9 @@ goog.provide('ol.renderer.canvas.VectorLayer');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('ol.ViewHint');
+goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.feature');
 goog.require('ol.layer.Vector');
@@ -63,18 +62,11 @@ ol.renderer.canvas.VectorLayer = function(mapRenderer, vectorLayer) {
    */
   this.replayGroup_ = null;
 
-  /**
-   * @type {HTMLCanvasElement}
-   */
-  var canvas = /** @type {HTMLCanvasElement} */
-      (goog.dom.createElement(goog.dom.TagName.CANVAS));
-
   /**
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.context_ = /** @type {CanvasRenderingContext2D} */
-      (canvas.getContext('2d'));
+  this.context_ = ol.dom.createCanvasContext2D();
 
 };
 goog.inherits(ol.renderer.canvas.VectorLayer, ol.renderer.canvas.Layer);

src/ol/renderer/webgl/webglmaprenderer.js

@@ -15,6 +15,7 @@ goog.require('goog.style');
 goog.require('goog.webgl');
 goog.require('ol.Tile');
 goog.require('ol.css');
+goog.require('ol.dom');
 goog.require('ol.layer.Image');
 goog.require('ol.layer.Tile');
 goog.require('ol.render.Event');
@@ -66,13 +67,6 @@ ol.renderer.webgl.Map = function(container, map) {
   this.canvas_.className = ol.css.CLASS_UNSELECTABLE;
   goog.dom.insertChildAt(container, this.canvas_, 0);
 
-  /**
-   * @private
-   * @type {HTMLCanvasElement}
-   */
-  this.clipTileCanvas_ = /** @type {HTMLCanvasElement} */
-      (goog.dom.createElement(goog.dom.TagName.CANVAS));
-
   /**
    * @private
    * @type {number}
@@ -83,8 +77,7 @@ ol.renderer.webgl.Map = function(container, map) {
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.clipTileContext_ = /** @type {CanvasRenderingContext2D} */
-      (this.clipTileCanvas_.getContext('2d'));
+  this.clipTileContext_ = ol.dom.createCanvasContext2D();
 
   /**
    * @private
@@ -217,7 +210,7 @@ ol.renderer.webgl.Map.prototype.bindTileTexture =
     var texture = gl.createTexture();
     gl.bindTexture(goog.webgl.TEXTURE_2D, texture);
     if (tileGutter > 0) {
-      var clipTileCanvas = this.clipTileCanvas_;
+      var clipTileCanvas = this.clipTileContext_.canvas;
       var clipTileContext = this.clipTileContext_;
       if (this.clipTileCanvasSize_ != tileSize) {
         clipTileCanvas.width = tileSize;

src/ol/source/debugtilesource.js

@@ -1,11 +1,10 @@
 goog.provide('ol.source.TileDebug');
 
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('ol.Tile');
 goog.require('ol.TileCache');
 goog.require('ol.TileCoord');
 goog.require('ol.TileState');
+goog.require('ol.dom');
 goog.require('ol.source.Tile');
 goog.require('ol.tilegrid.TileGrid');
 
@@ -54,14 +53,7 @@ ol.DebugTile_.prototype.getImage = function(opt_context) {
   } else {
 
     var tileSize = this.tileSize_;
-
-    var canvas = /** @type {HTMLCanvasElement} */
-        (goog.dom.createElement(goog.dom.TagName.CANVAS));
-    canvas.width = tileSize;
-    canvas.height = tileSize;
-
-    var context = /** @type {CanvasRenderingContext2D} */
-        (canvas.getContext('2d'));
+    var context = ol.dom.createCanvasContext2D(tileSize, tileSize);
 
     context.strokeStyle = 'black';
     context.strokeRect(0.5, 0.5, tileSize + 0.5, tileSize + 0.5);
@@ -73,8 +65,8 @@ ol.DebugTile_.prototype.getImage = function(opt_context) {
     context.fillText(
         this.tileCoord_.toString(), tileSize / 2, tileSize / 2);
 
-    this.canvasByContext_[key] = canvas;
-    return canvas;
+    this.canvasByContext_[key] = context.canvas;
+    return context.canvas;
 
   }
 };

src/ol/source/imagevectorsource.js

@@ -1,11 +1,10 @@
 goog.provide('ol.source.ImageVector');
 
 goog.require('goog.asserts');
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.vec.Mat4');
+goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.feature');
 goog.require('ol.render.canvas.ReplayGroup');
@@ -54,19 +53,11 @@ ol.source.ImageVector = function(options) {
    */
   this.transform_ = goog.vec.Mat4.createNumber();
 
-  /**
-   * @private
-   * @type {HTMLCanvasElement}
-   */
-  this.canvasElement_ = /** @type {HTMLCanvasElement} */
-      (goog.dom.createElement(goog.dom.TagName.CANVAS));
-
   /**
    * @private
    * @type {CanvasRenderingContext2D}
    */
-  this.canvasContext_ = /** @type {CanvasRenderingContext2D} */
-      (this.canvasElement_.getContext('2d'));
+  this.canvasContext_ = ol.dom.createCanvasContext2D();
 
   /**
    * @private
@@ -130,8 +121,8 @@ ol.source.ImageVector.prototype.canvasFunctionInternal_ =
   }
 
   if (this.canvasSize_[0] != size[0] || this.canvasSize_[1] != size[1]) {
-    this.canvasElement_.width = size[0];
-    this.canvasElement_.height = size[1];
+    this.canvasContext_.canvas.width = size[0];
+    this.canvasContext_.canvas.height = size[1];
     this.canvasSize_[0] = size[0];
     this.canvasSize_[1] = size[1];
   } else {
@@ -145,7 +136,7 @@ ol.source.ImageVector.prototype.canvasFunctionInternal_ =
 
   this.replayGroup_ = replayGroup;
 
-  return this.canvasElement_;
+  return this.canvasContext_.canvas;
 };
 
 

src/ol/source/zoomifysource.js

@@ -2,12 +2,11 @@ goog.provide('ol.source.Zoomify');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('ol.ImageTile');
 goog.require('ol.TileCoord');
 goog.require('ol.TileState');
 goog.require('ol.TileUrlFunction');
+goog.require('ol.dom');
 goog.require('ol.proj');
 goog.require('ol.source.TileImage');
 goog.require('ol.tilegrid.Zoomify');
@@ -156,26 +155,21 @@ goog.inherits(ol.source.ZoomifyTile_, ol.ImageTile);
  * @inheritDoc
  */
 ol.source.ZoomifyTile_.prototype.getImage = function(opt_context) {
+  var tileSize = ol.DEFAULT_TILE_SIZE;
   var key = goog.isDef(opt_context) ? goog.getUid(opt_context).toString() : '';
   if (key in this.zoomifyImageByContext_) {
     return this.zoomifyImageByContext_[key];
   } else {
     var image = goog.base(this, 'getImage', opt_context);
     if (this.state == ol.TileState.LOADED) {
-      if (image.width == ol.DEFAULT_TILE_SIZE &&
-          image.height == ol.DEFAULT_TILE_SIZE) {
+      if (image.width == tileSize && image.height == tileSize) {
         this.zoomifyImageByContext_[key] = image;
         return image;
       } else {
-        var canvas = /** @type {HTMLCanvasElement} */
-            (goog.dom.createElement(goog.dom.TagName.CANVAS));
-        canvas.width = ol.DEFAULT_TILE_SIZE;
-        canvas.height = ol.DEFAULT_TILE_SIZE;
-        var context = /** @type {CanvasRenderingContext2D} */
-            (canvas.getContext('2d'));
+        var context = ol.dom.createCanvasContext2D(tileSize, tileSize);
         context.drawImage(image, 0, 0);
-        this.zoomifyImageByContext_[key] = canvas;
-        return canvas;
+        this.zoomifyImageByContext_[key] = context.canvas;
+        return context.canvas;
       }
     } else {
       return image;

src/ol/style/iconstyle.js

@@ -7,11 +7,10 @@ goog.provide('ol.style.IconImageCache');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
-goog.require('goog.dom');
-goog.require('goog.dom.TagName');
 goog.require('goog.events');
 goog.require('goog.events.EventTarget');
 goog.require('goog.events.EventType');
+goog.require('ol.dom');
 goog.require('ol.style.Image');
 goog.require('ol.style.ImageState');
 
@@ -312,12 +311,7 @@ ol.style.IconImage_.get = function(src, crossOrigin) {
  * @private
  */
 ol.style.IconImage_.prototype.determineTainting_ = function() {
-  var canvas = /** @type {HTMLCanvasElement} */
-      (goog.dom.createElement(goog.dom.TagName.CANVAS));
-  canvas.width = 1;
-  canvas.height = 1;
-  var context = /** @type {CanvasRenderingContext2D} */
-      (canvas.getContext('2d'));
+  var context = ol.dom.createCanvasContext2D(1, 1);
   context.drawImage(this.image_, 0, 0);
   try {
     context.getImageData(0, 0, 1, 1);
@@ -381,16 +375,11 @@ ol.style.IconImage_.prototype.getImageState = function() {
 ol.style.IconImage_.prototype.getHitDetectionImage = function(pixelRatio) {
   if (goog.isNull(this.hitDetectionImage_)) {
     if (this.tainting_) {
-      var canvas = /** @type {HTMLCanvasElement} */
-          (goog.dom.createElement(goog.dom.TagName.CANVAS));
       var width = this.size_[0];
       var height = this.size_[1];
-      canvas.width = width;
-      canvas.height = height;
-      var context = /** @type {CanvasRenderingContext2D} */
-          (canvas.getContext('2d'));
+      var context = ol.dom.createCanvasContext2D(width, height);
       context.fillRect(0, 0, width, height);
-      this.hitDetectionImage_ = canvas;
+      this.hitDetectionImage_ = context.canvas;
     } else {
       this.hitDetectionImage_ = this.image_;
     }