Prerender labels and cache them as images

2017-08-31 16:19:33 +02:00
parent 5f2b729c74
commit 35bd92b713
15 changed files with 211 additions and 258 deletions
--- a/src/ol/render/canvas/imagereplay.js
+++ b/src/ol/render/canvas/imagereplay.js
@@ -11,11 +11,12 @@ goog.require('ol.render.canvas.Replay');
 * @param {number} tolerance Tolerance.
 * @param {ol.Extent} maxExtent Maximum extent.
 * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
 * @param {boolean} overlaps The replay can have overlapping geometries.
 * @struct
 */
-ol.render.canvas.ImageReplay = function(tolerance, maxExtent, resolution, overlaps) {
-  ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, overlaps);
+ol.render.canvas.ImageReplay = function(tolerance, maxExtent, resolution, pixelRatio, overlaps) {
+  ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, pixelRatio, overlaps);

  /**
   * @private
--- a/src/ol/render/canvas/instruction.js
+++ b/src/ol/render/canvas/instruction.js
@@ -10,12 +10,10 @@ ol.render.canvas.Instruction = {
  CLOSE_PATH: 3,
  CUSTOM: 4,
  DRAW_IMAGE: 5,
-  DRAW_TEXT: 6,
-  END_GEOMETRY: 7,
-  FILL: 8,
-  MOVE_TO_LINE_TO: 9,
-  SET_FILL_STYLE: 10,
-  SET_STROKE_STYLE: 11,
-  SET_TEXT_STYLE: 12,
-  STROKE: 13
+  END_GEOMETRY: 6,
+  FILL: 7,
+  MOVE_TO_LINE_TO: 8,
+  SET_FILL_STYLE: 9,
+  SET_STROKE_STYLE: 10,
+  STROKE: 11
 };
--- a/src/ol/render/canvas/linestringreplay.js
+++ b/src/ol/render/canvas/linestringreplay.js
@@ -15,12 +15,13 @@ goog.require('ol.render.canvas.Replay');
 * @param {number} tolerance Tolerance.
 * @param {ol.Extent} maxExtent Maximum extent.
 * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
 * @param {boolean} overlaps The replay can have overlapping geometries.
 * @struct
 */
-ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, overlaps) {
+ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, pixelRatio, overlaps) {

-  ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, overlaps);
+  ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, pixelRatio, overlaps);

  /**
   * @private
--- a/src/ol/render/canvas/polygonreplay.js
+++ b/src/ol/render/canvas/polygonreplay.js
@@ -17,12 +17,13 @@ goog.require('ol.render.canvas.Replay');
 * @param {number} tolerance Tolerance.
 * @param {ol.Extent} maxExtent Maximum extent.
 * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
 * @param {boolean} overlaps The replay can have overlapping geometries.
 * @struct
 */
-ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, overlaps) {
+ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, pixelRatio, overlaps) {

-  ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, overlaps);
+  ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, pixelRatio, overlaps);

  /**
   * @private
--- a/src/ol/render/canvas/replay.js
+++ b/src/ol/render/canvas/replay.js
@@ -20,10 +20,11 @@ goog.require('ol.transform');
 * @param {number} tolerance Tolerance.
 * @param {ol.Extent} maxExtent Maximum extent.
 * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
 * @param {boolean} overlaps The replay can have overlapping geometries.
 * @struct
 */
-ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) {
+ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, pixelRatio, overlaps) {
  ol.render.VectorContext.call(this);

  /**
@@ -45,6 +46,11 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution, overlaps) {
   */
  this.overlaps = overlaps;

+  /**
+   * @protected
+   * @type {number}
+   */
+  this.pixelRatio = pixelRatio;
  /**
   * @protected
   * @type {number}
@@ -342,7 +348,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
  while (i < ii) {
    var instruction = instructions[i];
    var type = /** @type {ol.render.canvas.Instruction} */ (instruction[0]);
-    var /** @type {ol.Feature|ol.render.Feature} */ feature, fill, stroke, text, x, y;
+    var /** @type {ol.Feature|ol.render.Feature} */ feature, x, y;
    switch (type) {
      case ol.render.canvas.Instruction.BEGIN_GEOMETRY:
        feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
@@ -465,61 +471,6 @@ ol.render.canvas.Replay.prototype.replay_ = function(
        }
        ++i;
        break;
-      case ol.render.canvas.Instruction.DRAW_TEXT:
-        d = /** @type {number} */ (instruction[1]);
-        dd = /** @type {number} */ (instruction[2]);
-        text = /** @type {string} */ (instruction[3]);
-        var offsetX = /** @type {number} */ (instruction[4]) * pixelRatio;
-        var offsetY = /** @type {number} */ (instruction[5]) * pixelRatio;
-        rotation = /** @type {number} */ (instruction[6]);
-        scale = /** @type {number} */ (instruction[7]) * pixelRatio;
-        fill = /** @type {boolean} */ (instruction[8]);
-        stroke = /** @type {boolean} */ (instruction[9]);
-        rotateWithView = /** @type {boolean} */ (instruction[10]);
-        if (rotateWithView) {
-          rotation += viewRotation;
-        }
-        for (; d < dd; d += 2) {
-          x = pixelCoordinates[d] + offsetX;
-          y = pixelCoordinates[d + 1] + offsetY;
-          if (scale != 1 || rotation !== 0) {
-            ol.transform.compose(localTransform, x, y, scale, scale, rotation, -x, -y);
-            context.setTransform.apply(context, localTransform);
-          }
-
-          // Support multiple lines separated by \n
-          var lines = text.split('\n');
-          var numLines = lines.length;
-          var fontSize, lineY;
-          if (numLines > 1) {
-            // Estimate line height using width of capital M, and add padding
-            fontSize = Math.round(context.measureText('M').width * 1.5);
-            lineY = y - (((numLines - 1) / 2) * fontSize);
-          } else {
-            // No need to calculate line height/offset for a single line
-            fontSize = 0;
-            lineY = y;
-          }
-
-          for (var lineIndex = 0; lineIndex < numLines; lineIndex++) {
-            var line = lines[lineIndex];
-            if (stroke) {
-              context.strokeText(line, x, lineY);
-            }
-            if (fill) {
-              context.fillText(line, x, lineY);
-            }
-
-            // Move next line down by fontSize px
-            lineY = lineY + fontSize;
-          }
-
-          if (scale != 1 || rotation !== 0) {
-            context.setTransform.apply(context, resetTransform);
-          }
-        }
-        ++i;
-        break;
      case ol.render.canvas.Instruction.END_GEOMETRY:
        if (featureCallback !== undefined) {
          feature = /** @type {ol.Feature|ol.render.Feature} */ (instruction[1]);
@@ -610,12 +561,6 @@ ol.render.canvas.Replay.prototype.replay_ = function(
        }
        ++i;
        break;
-      case ol.render.canvas.Instruction.SET_TEXT_STYLE:
-        context.font = /** @type {string} */ (instruction[1]);
-        context.textAlign = /** @type {string} */ (instruction[2]);
-        context.textBaseline = /** @type {string} */ (instruction[3]);
-        ++i;
-        break;
      case ol.render.canvas.Instruction.STROKE:
        if (batchSize) {
          pendingStroke++;
--- a/src/ol/render/canvas/replaygroup.js
+++ b/src/ol/render/canvas/replaygroup.js
@@ -22,12 +22,13 @@ goog.require('ol.transform');
 * @param {number} tolerance Tolerance.
 * @param {ol.Extent} maxExtent Max extent.
 * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
 * @param {boolean} overlaps The replay group can have overlapping geometries.
 * @param {number=} opt_renderBuffer Optional rendering buffer.
 * @struct
 */
 ol.render.canvas.ReplayGroup = function(
-    tolerance, maxExtent, resolution, overlaps, opt_renderBuffer) {
+    tolerance, maxExtent, resolution, pixelRatio, overlaps, opt_renderBuffer) {
  ol.render.ReplayGroup.call(this);

  /**
@@ -48,6 +49,12 @@ ol.render.canvas.ReplayGroup = function(
   */
  this.overlaps_ = overlaps;

+  /**
+   * @private
+   * @type {number}
+   */
+  this.pixelRatio_ = pixelRatio;
+
  /**
   * @private
   * @type {number}
@@ -296,7 +303,7 @@ ol.render.canvas.ReplayGroup.prototype.getReplay = function(zIndex, replayType)
  if (replay === undefined) {
    var Constructor = ol.render.canvas.ReplayGroup.BATCH_CONSTRUCTORS_[replayType];
    replay = new Constructor(this.tolerance_, this.maxExtent_,
-        this.resolution_, this.overlaps_);
+        this.resolution_, this.pixelRatio_, this.overlaps_);
    replays[replayType] = replay;
  }
  return replay;
@@ -402,7 +409,7 @@ ol.render.canvas.ReplayGroup.prototype.replayHitDetection_ = function(
 * @private
 * @type {Object.<ol.render.ReplayType,
 *                function(new: ol.render.canvas.Replay, number, ol.Extent,
- *                number, boolean)>}
+ *                number, number, boolean)>}
 */
 ol.render.canvas.ReplayGroup.BATCH_CONSTRUCTORS_ = {
  'Circle': ol.render.canvas.PolygonReplay,
--- a/src/ol/render/canvas/textreplay.js
+++ b/src/ol/render/canvas/textreplay.js
@@ -2,9 +2,12 @@ goog.provide('ol.render.canvas.TextReplay');

 goog.require('ol');
 goog.require('ol.colorlike');
+goog.require('ol.has');
 goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.Instruction');
 goog.require('ol.render.canvas.Replay');
+goog.require('ol.render.replay');
+goog.require('ol.structs.LRUCache');


 /**
@@ -13,30 +16,13 @@ goog.require('ol.render.canvas.Replay');
 * @param {number} tolerance Tolerance.
 * @param {ol.Extent} maxExtent Maximum extent.
 * @param {number} resolution Resolution.
+ * @param {number} pixelRatio Pixel ratio.
 * @param {boolean} overlaps The replay can have overlapping geometries.
 * @struct
 */
-ol.render.canvas.TextReplay = function(tolerance, maxExtent, resolution, overlaps) {
+ol.render.canvas.TextReplay = function(tolerance, maxExtent, resolution, pixelRatio, overlaps) {

-  ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, overlaps);
-
-  /**
-   * @private
-   * @type {?ol.CanvasFillState}
-   */
-  this.replayFillState_ = null;
-
-  /**
-   * @private
-   * @type {?ol.CanvasStrokeState}
-   */
-  this.replayStrokeState_ = null;
-
-  /**
-   * @private
-   * @type {?ol.CanvasTextState}
-   */
-  this.replayTextState_ = null;
+  ol.render.canvas.Replay.call(this, tolerance, maxExtent, resolution, pixelRatio, overlaps);

  /**
   * @private
@@ -92,140 +78,153 @@ ol.render.canvas.TextReplay = function(tolerance, maxExtent, resolution, overlap
   */
  this.textState_ = null;

+  while (ol.render.canvas.TextReplay.labelCache_.canExpireCache()) {
+    ol.render.canvas.TextReplay.labelCache_.pop();
+  }
+
 };
 ol.inherits(ol.render.canvas.TextReplay, ol.render.canvas.Replay);


+/**
+ * @private
+ * @type {ol.structs.LRUCache.<HTMLCanvasElement>}
+ */
+ol.render.canvas.TextReplay.labelCache_ = new ol.structs.LRUCache();
+
+
+/**
+ * @param {string} font Font to use for measuring.
+ * @param {Array.<string>} lines Lines to measure.
+ * @param {Array.<number>} widths Array will be populated with the widths of
+ * each line.
+ * @return {ol.Size} Measuremnt.
+ */
+ol.render.canvas.TextReplay.measureText = (function() {
+  var textContainer;
+  return function(font, lines, widths) {
+    if (!textContainer) {
+      textContainer = document.createElement('span');
+      textContainer.style.visibility = 'hidden';
+      textContainer.style.whiteSpace = 'nowrap';
+    }
+    textContainer.style.font = font;
+    document.body.appendChild(textContainer);
+    var numLines = lines.length;
+    var width = 0;
+    var currentWidth, i;
+    for (i = 0; i < numLines; ++i) {
+      textContainer.textContent = lines[i];
+      currentWidth = textContainer.offsetWidth;
+      width = Math.max(width, currentWidth);
+      widths.push(currentWidth);
+    }
+    var measurement = [width, textContainer.offsetHeight * numLines];
+    document.body.removeChild(textContainer);
+    return measurement;
+  };
+})();
+
+
 /**
 * @inheritDoc
 */
 ol.render.canvas.TextReplay.prototype.drawText = function(flatCoordinates, offset, end, stride, geometry, feature) {
-  if (this.text_ === '' || !this.textState_ ||
-      (!this.textFillState_ && !this.textStrokeState_)) {
+  var fillState = this.textFillState_;
+  var strokeState = this.textStrokeState_;
+  var textState = this.textState_;
+  if (this.text_ === '' || !textState || (!fillState && !strokeState)) {
    return;
  }
-  if (this.textFillState_) {
-    this.setReplayFillState_(this.textFillState_);
-  }
-  if (this.textStrokeState_) {
-    this.setReplayStrokeState_(this.textStrokeState_);
-  }
-  this.setReplayTextState_(this.textState_);
  this.beginGeometry(geometry, feature);
+
  var myBegin = this.coordinates.length;
  var myEnd =
      this.appendFlatCoordinates(flatCoordinates, offset, end, stride, false, false);
-  var fill = !!this.textFillState_;
-  var stroke = !!this.textStrokeState_;
+  var fill = !!fillState;
+  var stroke = !!strokeState;
+  var pixelRatio = this.pixelRatio;
+  var textAlign = textState.textAlign;
+  var align = ol.render.replay.TEXT_ALIGN[textAlign];
+  var textBaseline = textState.textBaseline;
+  var baseline = ol.render.replay.TEXT_ALIGN[textBaseline];
+  var strokeWidth = stroke && strokeState.lineWidth ? strokeState.lineWidth : 0;
+
+  var label;
+  var text = this.text_;
+  var key =
+    (stroke ?
+      (typeof strokeState.strokeStyle == 'string' ? strokeState.strokeStyle : ol.getUid(strokeState.strokeStyle)) +
+      strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeWidth +
+      strokeState.lineJoin + strokeState.miterLimit +
+      '[' + strokeState.lineDash.join() + ']' : '') +
+    textState.font + textAlign + text +
+    (fill ?
+      (typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + ol.getUid(fillState.fillStyle))) : '');
+
+  var lines = text.split('\n');
+  var numLines = lines.length;
+
+  if (!ol.render.canvas.TextReplay.labelCache_.containsKey(key)) {
+    label = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
+    ol.render.canvas.TextReplay.labelCache_.set(key, label);
+    var context = label.getContext('2d');
+    var widths = [];
+    var metrics = ol.render.canvas.TextReplay.measureText(textState.font, lines, widths);
+    var lineHeight = metrics[1] / numLines;
+    label.width = Math.ceil(metrics[0] + 2 * strokeWidth) * pixelRatio;
+    label.height = Math.ceil(metrics[1] + 2 * strokeWidth) * pixelRatio;
+    context.scale(pixelRatio, pixelRatio);
+    context.font = textState.font;
+    if (stroke) {
+      context.strokeStyle = strokeState.strokeStyle;
+      context.lineWidth = strokeState.lineWidth;
+      context.lineCap = strokeState.lineCap;
+      context.lineJoin = strokeState.lineJoin;
+      context.miterLimit = strokeState.miterLimit;
+      if (ol.has.CANVAS_LINE_DASH) {
+        context.setLineDash(strokeState.lineDash);
+        context.lineDashOffset = strokeState.lineDashOffset;
+      }
+    }
+    if (fill) {
+      context.fillStyle = fillState.fillStyle;
+    }
+    context.textBaseline = 'top';
+    context.textAlign = 'left';
+    var x = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
+    var i;
+    if (stroke) {
+      for (i = 0; i < numLines; ++i) {
+        context.strokeText(lines[i], x - align * widths[i], strokeWidth + i * lineHeight);
+      }
+    }
+    if (fill) {
+      for (i = 0; i < numLines; ++i) {
+        context.fillText(lines[i], x - align * widths[i], strokeWidth + i * lineHeight);
+      }
+    }
+  }
+  label = ol.render.canvas.TextReplay.labelCache_.get(key);
+
+  var anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
+  var anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
+
  var drawTextInstruction = [
-    ol.render.canvas.Instruction.DRAW_TEXT, myBegin, myEnd, this.text_,
-    this.textOffsetX_, this.textOffsetY_, this.textRotation_, this.textScale_,
-    fill, stroke, this.textRotateWithView_];
+    ol.render.canvas.Instruction.DRAW_IMAGE, myBegin, myEnd, label,
+    anchorX - this.textOffsetX_ * pixelRatio, anchorY - this.textOffsetY_ * pixelRatio,
+    label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,
+    this.textScale_ / pixelRatio, //FIXME missing HiDPI support in DRAW_IMAGE
+    true, label.width
+  ];
+
  this.instructions.push(drawTextInstruction);
  this.hitDetectionInstructions.push(drawTextInstruction);
+
  this.endGeometry(geometry, feature);
 };


-/**
- * @param {ol.CanvasFillState} fillState Fill state.
- * @private
- */
-ol.render.canvas.TextReplay.prototype.setReplayFillState_ = function(fillState) {
-  var replayFillState = this.replayFillState_;
-  if (replayFillState &&
-      replayFillState.fillStyle == fillState.fillStyle) {
-    return;
-  }
-  var setFillStyleInstruction =
-      [ol.render.canvas.Instruction.SET_FILL_STYLE, fillState.fillStyle];
-  this.instructions.push(setFillStyleInstruction);
-  this.hitDetectionInstructions.push(setFillStyleInstruction);
-  if (!replayFillState) {
-    this.replayFillState_ = {
-      fillStyle: fillState.fillStyle
-    };
-  } else {
-    replayFillState.fillStyle = fillState.fillStyle;
-  }
-};
-
-
-/**
- * @param {ol.CanvasStrokeState} strokeState Stroke state.
- * @private
- */
-ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeState) {
-  var replayStrokeState = this.replayStrokeState_;
-  if (replayStrokeState &&
-      replayStrokeState.lineCap == strokeState.lineCap &&
-      replayStrokeState.lineDash == strokeState.lineDash &&
-      replayStrokeState.lineDashOffset == strokeState.lineDashOffset &&
-      replayStrokeState.lineJoin == strokeState.lineJoin &&
-      replayStrokeState.lineWidth == strokeState.lineWidth &&
-      replayStrokeState.miterLimit == strokeState.miterLimit &&
-      replayStrokeState.strokeStyle == strokeState.strokeStyle) {
-    return;
-  }
-  var setStrokeStyleInstruction = [
-    ol.render.canvas.Instruction.SET_STROKE_STYLE, strokeState.strokeStyle,
-    strokeState.lineWidth, strokeState.lineCap, strokeState.lineJoin,
-    strokeState.miterLimit, strokeState.lineDash, strokeState.lineDashOffset, false, 1
-  ];
-  this.instructions.push(setStrokeStyleInstruction);
-  this.hitDetectionInstructions.push(setStrokeStyleInstruction);
-  if (!replayStrokeState) {
-    this.replayStrokeState_ = {
-      lineCap: strokeState.lineCap,
-      lineDash: strokeState.lineDash,
-      lineDashOffset: strokeState.lineDashOffset,
-      lineJoin: strokeState.lineJoin,
-      lineWidth: strokeState.lineWidth,
-      miterLimit: strokeState.miterLimit,
-      strokeStyle: strokeState.strokeStyle
-    };
-  } else {
-    replayStrokeState.lineCap = strokeState.lineCap;
-    replayStrokeState.lineDash = strokeState.lineDash;
-    replayStrokeState.lineDashOffset = strokeState.lineDashOffset;
-    replayStrokeState.lineJoin = strokeState.lineJoin;
-    replayStrokeState.lineWidth = strokeState.lineWidth;
-    replayStrokeState.miterLimit = strokeState.miterLimit;
-    replayStrokeState.strokeStyle = strokeState.strokeStyle;
-  }
-};
-
-
-/**
- * @param {ol.CanvasTextState} textState Text state.
- * @private
- */
-ol.render.canvas.TextReplay.prototype.setReplayTextState_ = function(textState) {
-  var replayTextState = this.replayTextState_;
-  if (replayTextState &&
-      replayTextState.font == textState.font &&
-      replayTextState.textAlign == textState.textAlign &&
-      replayTextState.textBaseline == textState.textBaseline) {
-    return;
-  }
-  var setTextStyleInstruction = [ol.render.canvas.Instruction.SET_TEXT_STYLE,
-    textState.font, textState.textAlign, textState.textBaseline];
-  this.instructions.push(setTextStyleInstruction);
-  this.hitDetectionInstructions.push(setTextStyleInstruction);
-  if (!replayTextState) {
-    this.replayTextState_ = {
-      font: textState.font,
-      textAlign: textState.textAlign,
-      textBaseline: textState.textBaseline
-    };
-  } else {
-    replayTextState.font = textState.font;
-    replayTextState.textAlign = textState.textAlign;
-    replayTextState.textBaseline = textState.textBaseline;
-  }
-};
-
-
 /**
 * @inheritDoc
 */
--- a/src/ol/render/replay.js
+++ b/src/ol/render/replay.js
@@ -15,3 +15,21 @@ ol.render.replay.ORDER = [
  ol.render.ReplayType.TEXT,
  ol.render.ReplayType.DEFAULT
 ];
+
+/**
+ * @const
+ * @enum {number}
+ */
+ol.render.replay.TEXT_ALIGN = {
+  left: 0,
+  end: 0,
+  center: 0.5,
+  right: 1,
+  start: 1,
+  top: 0,
+  middle: 0.5,
+  hanging: 0.2,
+  alphabetic: 0.8,
+  ideographic: 0.8,
+  bottom: 1
+};
--- a/src/ol/render/webgl/textreplay.js
+++ b/src/ol/render/webgl/textreplay.js
@@ -4,6 +4,7 @@ goog.require('ol');
 goog.require('ol.colorlike');
 goog.require('ol.dom');
 goog.require('ol.has');
+goog.require('ol.render.replay');
 goog.require('ol.render.webgl');
 goog.require('ol.render.webgl.TextureReplay');
 goog.require('ol.style.AtlasManager');
@@ -348,8 +349,8 @@ ol.render.webgl.TextReplay.prototype.setTextStyle = function(textStyle) {
    state.font = textStyle.getFont() || ol.render.webgl.defaultFont;
    state.scale = textStyle.getScale() || 1;
    this.text_ = /** @type {string} */ (textStyle.getText());
-    var textAlign = ol.render.webgl.TextReplay.Align_[textStyle.getTextAlign()];
-    var textBaseline = ol.render.webgl.TextReplay.Align_[textStyle.getTextBaseline()];
+    var textAlign = ol.render.replay.TEXT_ALIGN[textStyle.getTextAlign()];
+    var textBaseline = ol.render.replay.TEXT_ALIGN[textStyle.getTextBaseline()];
    this.textAlign_ = textAlign === undefined ?
      ol.render.webgl.defaultTextAlign : textAlign;
    this.textBaseline_ = textBaseline === undefined ?
@@ -430,22 +431,3 @@ ol.render.webgl.TextReplay.prototype.getTextures = function(opt_all) {
 ol.render.webgl.TextReplay.prototype.getHitDetectionTextures = function() {
  return this.textures_;
 };
-
-
-/**
- * @enum {number}
- * @private
- */
-ol.render.webgl.TextReplay.Align_ = {
-  left: 0,
-  end: 0,
-  center: 0.5,
-  right: 1,
-  start: 1,
-  top: 0,
-  middle: 0.5,
-  hanging: 0.2,
-  alphabetic: 0.8,
-  ideographic: 0.8,
-  bottom: 1
-};
--- a/src/ol/renderer/canvas/vectorlayer.js
+++ b/src/ol/renderer/canvas/vectorlayer.js
@@ -321,8 +321,8 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame = function(frameState, lay
  this.dirty_ = false;

  var replayGroup = new ol.render.canvas.ReplayGroup(
-      ol.renderer.vector.getTolerance(resolution, pixelRatio), extent,
-      resolution, vectorSource.getOverlaps(), vectorLayer.getRenderBuffer());
+      ol.renderer.vector.getTolerance(resolution, pixelRatio), extent, resolution,
+      pixelRatio, vectorSource.getOverlaps(), vectorLayer.getRenderBuffer());
  vectorSource.loadFeatures(extent, resolution, projection);
  /**
   * @param {ol.Feature} feature Feature.
--- a/src/ol/renderer/canvas/vectortilelayer.js
+++ b/src/ol/renderer/canvas/vectortilelayer.js
@@ -167,7 +167,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(
    }
    replayState.dirty = false;
    var replayGroup = new ol.render.canvas.ReplayGroup(0, sharedExtent,
-        resolution, source.getOverlaps(), layer.getRenderBuffer());
+        resolution, pixelRatio, source.getOverlaps(), layer.getRenderBuffer());
    var squaredTolerance = ol.renderer.vector.getSquaredTolerance(
        resolution, pixelRatio);

--- a/src/ol/source/imagevector.js
+++ b/src/ol/source/imagevector.js
@@ -113,7 +113,7 @@ ol.source.ImageVector.prototype.canvasFunctionInternal_ = function(extent, resol

  var replayGroup = new ol.render.canvas.ReplayGroup(
      ol.renderer.vector.getTolerance(resolution, pixelRatio), extent,
-      resolution, this.source_.getOverlaps(), this.renderBuffer_);
+      resolution, pixelRatio, this.source_.getOverlaps(), this.renderBuffer_);

  this.source_.loadFeatures(extent, resolution, projection);

--- a/src/ol/structs/lrucache.js
+++ b/src/ol/structs/lrucache.js
@@ -10,8 +10,14 @@ goog.require('ol.asserts');
 * @constructor
 * @struct
 * @template T
+ * @param {number=} opt_highWaterMark High water mark.
 */
-ol.structs.LRUCache = function() {
+ol.structs.LRUCache = function(opt_highWaterMark) {
+
+  /**
+   * @type {number}
+   */
+  this.highWaterMark = opt_highWaterMark !== undefined ? opt_highWaterMark : 2048;

  /**
   * @private
@@ -40,6 +46,14 @@ ol.structs.LRUCache = function() {
 };


+/**
+ * @return {boolean} Can expire cache.
+ */
+ol.structs.LRUCache.prototype.canExpireCache = function() {
+  return this.getCount() > this.highWaterMark;
+};
+
+
 /**
 * FIXME empty description for jsdoc
 */
--- a/src/ol/tilecache.js
+++ b/src/ol/tilecache.js
@@ -12,25 +12,12 @@ goog.require('ol.structs.LRUCache');
 */
 ol.TileCache = function(opt_highWaterMark) {

-  ol.structs.LRUCache.call(this);
-
-  /**
-   * @type {number}
-   */
-  this.highWaterMark = opt_highWaterMark !== undefined ? opt_highWaterMark : 2048;
+  ol.structs.LRUCache.call(this, opt_highWaterMark);

 };
 ol.inherits(ol.TileCache, ol.structs.LRUCache);


-/**
- * @return {boolean} Can expire cache.
- */
-ol.TileCache.prototype.canExpireCache = function() {
-  return this.getCount() > this.highWaterMark;
-};
-
-
 /**
 * @param {Object.<string, ol.TileRange>} usedTiles Used tiles.
 */
--- a/test/spec/ol/renderer/canvas/replay.test.js
+++ b/test/spec/ol/renderer/canvas/replay.test.js
@@ -30,7 +30,7 @@ describe('ol.render.canvas.ReplayGroup', function() {

    beforeEach(function() {
      transform = ol.transform.create();
-      replay = new ol.render.canvas.ReplayGroup(1, [-180, -90, 180, 90], 1, false);
+      replay = new ol.render.canvas.ReplayGroup(1, [-180, -90, 180, 90], 1, 1, false);
      feature0 = new ol.Feature(new ol.geom.Polygon(
          [[[-90, 0], [-45, 45], [0, 0], [1, 1], [0, -45], [-90, 0]]]));
      feature1 = new ol.Feature(new ol.geom.Polygon(
@@ -174,7 +174,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
    });

    it('does not batch when overlaps is set to true', function() {
-      replay = new ol.render.canvas.ReplayGroup(1, [-180, -90, 180, 90], 1, true);
+      replay = new ol.render.canvas.ReplayGroup(1, [-180, -90, 180, 90], 1, 1, true);
      ol.renderer.vector.renderFeature(replay, feature1, style1, 1);
      ol.renderer.vector.renderFeature(replay, feature2, style1, 1);
      ol.renderer.vector.renderFeature(replay, feature3, style1, 1);
@@ -240,7 +240,7 @@ describe('ol.render.canvas.ReplayGroup', function() {
          [polygon.getGeometry().getCoordinates(), polygon.getGeometry().getCoordinates()]));
      var geometrycollection = new ol.Feature(new ol.geom.GeometryCollection(
          [point.getGeometry(), linestring.getGeometry(), polygon.getGeometry()]));
-      replay = new ol.render.canvas.ReplayGroup(1, [-180, -90, 180, 90], 1, true);
+      replay = new ol.render.canvas.ReplayGroup(1, [-180, -90, 180, 90], 1, 1, true);
      ol.renderer.vector.renderFeature(replay, point, style, 1);
      ol.renderer.vector.renderFeature(replay, multipoint, style, 1);
      ol.renderer.vector.renderFeature(replay, linestring, style, 1);
@@ -284,7 +284,7 @@ describe('ol.render.canvas.Replay', function() {
    it('creates a new replay batch', function() {
      var tolerance = 10;
      var extent = [-180, -90, 180, 90];
-      var replay = new ol.render.canvas.Replay(tolerance, extent, 1, true);
+      var replay = new ol.render.canvas.Replay(tolerance, extent, 1, 1, true);
      expect(replay).to.be.a(ol.render.canvas.Replay);
    });

@@ -294,7 +294,7 @@ describe('ol.render.canvas.Replay', function() {

    var replay;
    beforeEach(function() {
-      replay = new ol.render.canvas.Replay(1, [-180, -90, 180, 90], 1, true);
+      replay = new ol.render.canvas.Replay(1, [-180, -90, 180, 90], 1, 1, true);
    });

    it('appends coordinates that are within the max extent', function() {