Merge pull request #1306 from fredj/canvas-size

ol.BrowserFeature.DEVICE_PIXEL_RATIO and canvas size

src/ol/browserfeature.js

@@ -11,6 +11,13 @@ ol.ASSUME_TOUCH = false;
  * @type {Object}
  */
 ol.BrowserFeature = {
+  /**
+   * The ratio between physical pixels and device-independent pixels
+   * (dips) on the device (`window.devicePixelRatio`).
+   * @type {number}
+   */
+  DEVICE_PIXEL_RATIO: goog.global.devicePixelRatio || 1,
+
   /**
    * True if browser supports touch events.
    * @type {boolean}

src/ol/renderer/canvas/canvasmaprenderer.js

@@ -35,6 +35,8 @@ ol.renderer.canvas.Map = function(container, map) {
    */
   this.canvas_ = /** @type {HTMLCanvasElement} */
       (goog.dom.createElement(goog.dom.TagName.CANVAS));
+  this.canvas_.style.width = '100%';
+  this.canvas_.style.height = '100%';
   this.canvas_.className = ol.css.CLASS_UNSELECTABLE;
   goog.dom.insertChildAt(container, this.canvas_, 0);
 
@@ -100,7 +102,7 @@ ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {
   }
 
   var context = this.context_;
-  context.clearRect(0, 0, size[0], size[1]);
+  context.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
 
   this.calculateMatrices2D(frameState);
 

src/ol/renderer/webgl/webglmaprenderer.js

@@ -70,6 +70,8 @@ ol.renderer.webgl.Map = function(container, map) {
    */
   this.canvas_ = /** @type {HTMLCanvasElement} */
       (goog.dom.createElement(goog.dom.TagName.CANVAS));
+  this.canvas_.style.width = '100%';
+  this.canvas_.style.height = '100%';
   this.canvas_.className = ol.css.CLASS_UNSELECTABLE;
   goog.dom.insertChildAt(container, this.canvas_, 0);
 
@@ -564,7 +566,7 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
   gl.clearColor(0, 0, 0, 0);
   gl.clear(goog.webgl.COLOR_BUFFER_BIT);
   gl.enable(goog.webgl.BLEND);
-  gl.viewport(0, 0, size[0], size[1]);
+  gl.viewport(0, 0, this.canvas_.width, this.canvas_.height);
 
   this.bindBuffer(goog.webgl.ARRAY_BUFFER, this.arrayBuffer_);