Add ol.dom.createCanvasContext2D function

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;