Add ol.dom.createCanvasContext2D function

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;