Line Dash offset

2016-11-08 15:38:00 +01:00
parent fd1029600b
commit 7a4ae3a6ac
17 changed files with 150 additions and 15 deletions
--- a/externs/olx.js
+++ b/externs/olx.js
@@ -7145,6 +7145,7 @@ olx.style.RegularShapeOptions.prototype.atlasManager;
 *     lineCap: (string|undefined),
 *     lineJoin: (string|undefined),
 *     lineDash: (Array.<number>|undefined),
+ *     lineDashOffset: (number|undefined),
 *     miterLimit: (number|undefined),
 *     width: (number|undefined)}}
 */
@@ -7191,6 +7192,14 @@ olx.style.StrokeOptions.prototype.lineJoin;
 olx.style.StrokeOptions.prototype.lineDash;


+/**
+ * Line dash offset. Default is '0'.
+ * @type {number|undefined}
+ * @api
+ */
+olx.style.StrokeOptions.prototype.lineDashOffset;
+
+
 /**
 * Miter limit. Default is `10`.
 * @type {number|undefined}
--- a/src/ol/render/canvas.js
+++ b/src/ol/render/canvas.js
@@ -29,6 +29,13 @@ ol.render.canvas.defaultLineCap = 'round';
 ol.render.canvas.defaultLineDash = [];


+/**
+ * @const
+ * @type {number}
+ */
+ol.render.canvas.defaultLineDashOffset = 0;
+
+
 /**
 * @const
 * @type {string}
--- a/src/ol/render/canvas/immediate.js
+++ b/src/ol/render/canvas/immediate.js
@@ -819,6 +819,7 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, st
    var strokeStyleColor = strokeStyle.getColor();
    var strokeStyleLineCap = strokeStyle.getLineCap();
    var strokeStyleLineDash = strokeStyle.getLineDash();
+    var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
    var strokeStyleLineJoin = strokeStyle.getLineJoin();
    var strokeStyleWidth = strokeStyle.getWidth();
    var strokeStyleMiterLimit = strokeStyle.getMiterLimit();
@@ -827,6 +828,8 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, st
          strokeStyleLineCap : ol.render.canvas.defaultLineCap,
      lineDash: strokeStyleLineDash ?
          strokeStyleLineDash : ol.render.canvas.defaultLineDash,
+      lineDashOffset: strokeStyleLineDashOffset ?
+          strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset,
      lineJoin: strokeStyleLineJoin !== undefined ?
          strokeStyleLineJoin : ol.render.canvas.defaultLineJoin,
      lineWidth: this.pixelRatio_ * (strokeStyleWidth !== undefined ?
@@ -898,6 +901,7 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
      var textStrokeStyleColor = textStrokeStyle.getColor();
      var textStrokeStyleLineCap = textStrokeStyle.getLineCap();
      var textStrokeStyleLineDash = textStrokeStyle.getLineDash();
+      var textStrokeStyleLineDashOffset = textStrokeStyle.getLineDashOffset();
      var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
      var textStrokeStyleWidth = textStrokeStyle.getWidth();
      var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
@@ -906,6 +910,8 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
            textStrokeStyleLineCap : ol.render.canvas.defaultLineCap,
        lineDash: textStrokeStyleLineDash ?
            textStrokeStyleLineDash : ol.render.canvas.defaultLineDash,
+        lineDashOffset: textStrokeStyleLineDashOffset ?
+            textStrokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset,
        lineJoin: textStrokeStyleLineJoin !== undefined ?
            textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin,
        lineWidth: textStrokeStyleWidth !== undefined ?
--- a/src/ol/render/canvas/linestringreplay.js
+++ b/src/ol/render/canvas/linestringreplay.js
@@ -33,6 +33,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
   * @type {{currentStrokeStyle: (ol.ColorLike|undefined),
   *         currentLineCap: (string|undefined),
   *         currentLineDash: Array.<number>,
+   *         currentLineDashOffset: (number|undefined),
   *         currentLineJoin: (string|undefined),
   *         currentLineWidth: (number|undefined),
   *         currentMiterLimit: (number|undefined),
@@ -40,6 +41,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
   *         strokeStyle: (ol.ColorLike|undefined),
   *         lineCap: (string|undefined),
   *         lineDash: Array.<number>,
+   *         lineDashOffset: (number|undefined),
   *         lineJoin: (string|undefined),
   *         lineWidth: (number|undefined),
   *         miterLimit: (number|undefined)}|null}
@@ -48,6 +50,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
    currentStrokeStyle: undefined,
    currentLineCap: undefined,
    currentLineDash: null,
+    currentLineDashOffset: undefined,
    currentLineJoin: undefined,
    currentLineWidth: undefined,
    currentMiterLimit: undefined,
@@ -55,6 +58,7 @@ ol.render.canvas.LineStringReplay = function(tolerance, maxExtent, resolution, o
    strokeStyle: undefined,
    lineCap: undefined,
    lineDash: null,
+    lineDashOffset: undefined,
    lineJoin: undefined,
    lineWidth: undefined,
    miterLimit: undefined
@@ -107,12 +111,14 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
  var strokeStyle = state.strokeStyle;
  var lineCap = state.lineCap;
  var lineDash = state.lineDash;
+  var lineDashOffset = state.lineDashOffset;
  var lineJoin = state.lineJoin;
  var lineWidth = state.lineWidth;
  var miterLimit = state.miterLimit;
  if (state.currentStrokeStyle != strokeStyle ||
      state.currentLineCap != lineCap ||
      !ol.array.equals(state.currentLineDash, lineDash) ||
+      state.currentLineDashOffset != lineDashOffset ||
      state.currentLineJoin != lineJoin ||
      state.currentLineWidth != lineWidth ||
      state.currentMiterLimit != miterLimit) {
@@ -122,13 +128,14 @@ ol.render.canvas.LineStringReplay.prototype.setStrokeStyle_ = function() {
    }
    this.instructions.push([
      ol.render.canvas.Instruction.SET_STROKE_STYLE,
-      strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, true, 1
+      strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, lineDashOffset, true, 1
    ], [
      ol.render.canvas.Instruction.BEGIN_PATH
    ]);
    state.currentStrokeStyle = strokeStyle;
    state.currentLineCap = lineCap;
    state.currentLineDash = lineDash;
+    state.currentLineDashOffset = lineDashOffset;
    state.currentLineJoin = lineJoin;
    state.currentLineWidth = lineWidth;
    state.currentMiterLimit = miterLimit;
@@ -151,7 +158,7 @@ ol.render.canvas.LineStringReplay.prototype.drawLineString = function(lineString
  this.hitDetectionInstructions.push([
    ol.render.canvas.Instruction.SET_STROKE_STYLE,
    state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-    state.miterLimit, state.lineDash, true, 1
+    state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
  ], [
    ol.render.canvas.Instruction.BEGIN_PATH
  ]);
@@ -178,7 +185,7 @@ ol.render.canvas.LineStringReplay.prototype.drawMultiLineString = function(multi
  this.hitDetectionInstructions.push([
    ol.render.canvas.Instruction.SET_STROKE_STYLE,
    state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-    state.miterLimit, state.lineDash, true, 1
+    state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
  ], [
    ol.render.canvas.Instruction.BEGIN_PATH
  ]);
@@ -222,6 +229,9 @@ ol.render.canvas.LineStringReplay.prototype.setFillStrokeStyle = function(fillSt
  var strokeStyleLineDash = strokeStyle.getLineDash();
  this.state_.lineDash = strokeStyleLineDash ?
      strokeStyleLineDash : ol.render.canvas.defaultLineDash;
+  var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+  this.state_.lineDashOffset = strokeStyleLineDashOffset ?
+      strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
  var strokeStyleLineJoin = strokeStyle.getLineJoin();
  this.state_.lineJoin = strokeStyleLineJoin !== undefined ?
      strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
--- a/src/ol/render/canvas/polygonreplay.js
+++ b/src/ol/render/canvas/polygonreplay.js
@@ -36,6 +36,7 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
   *         currentStrokeStyle: (ol.ColorLike|undefined),
   *         currentLineCap: (string|undefined),
   *         currentLineDash: Array.<number>,
+   *         currentLineDashOffset: (number|undefined),
   *         currentLineJoin: (string|undefined),
   *         currentLineWidth: (number|undefined),
   *         currentMiterLimit: (number|undefined),
@@ -43,6 +44,7 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
   *         strokeStyle: (ol.ColorLike|undefined),
   *         lineCap: (string|undefined),
   *         lineDash: Array.<number>,
+   *         lineDashOffset: (number|undefined),
   *         lineJoin: (string|undefined),
   *         lineWidth: (number|undefined),
   *         miterLimit: (number|undefined)}|null}
@@ -52,6 +54,7 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
    currentStrokeStyle: undefined,
    currentLineCap: undefined,
    currentLineDash: null,
+    currentLineDashOffset: undefined,
    currentLineJoin: undefined,
    currentLineWidth: undefined,
    currentMiterLimit: undefined,
@@ -59,6 +62,7 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution, over
    strokeStyle: undefined,
    lineCap: undefined,
    lineDash: null,
+    lineDashOffset: undefined,
    lineJoin: undefined,
    lineWidth: undefined,
    miterLimit: undefined
@@ -137,7 +141,7 @@ ol.render.canvas.PolygonReplay.prototype.drawCircle = function(circleGeometry, f
    this.hitDetectionInstructions.push([
      ol.render.canvas.Instruction.SET_STROKE_STYLE,
      state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-      state.miterLimit, state.lineDash, true, 1
+      state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
    ]);
  }
  var flatCoordinates = circleGeometry.getFlatCoordinates();
@@ -179,7 +183,7 @@ ol.render.canvas.PolygonReplay.prototype.drawPolygon = function(polygonGeometry,
    this.hitDetectionInstructions.push([
      ol.render.canvas.Instruction.SET_STROKE_STYLE,
      state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-      state.miterLimit, state.lineDash, true, 1
+      state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
    ]);
  }
  var ends = polygonGeometry.getEnds();
@@ -211,7 +215,7 @@ ol.render.canvas.PolygonReplay.prototype.drawMultiPolygon = function(multiPolygo
    this.hitDetectionInstructions.push([
      ol.render.canvas.Instruction.SET_STROKE_STYLE,
      state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
-      state.miterLimit, state.lineDash, true, 1
+      state.miterLimit, state.lineDash, state.lineDashOffset, true, 1
    ]);
  }
  var endss = multiPolygonGeometry.getEndss();
@@ -285,6 +289,9 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle
    var strokeStyleLineDash = strokeStyle.getLineDash();
    state.lineDash = strokeStyleLineDash ?
        strokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
+    var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+    state.lineDashOffset = strokeStyleLineDashOffset ?
+        strokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
    var strokeStyleLineJoin = strokeStyle.getLineJoin();
    state.lineJoin = strokeStyleLineJoin !== undefined ?
        strokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
@@ -304,6 +311,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle
    state.strokeStyle = undefined;
    state.lineCap = undefined;
    state.lineDash = null;
+    state.lineDashOffset = undefined;
    state.lineJoin = undefined;
    state.lineWidth = undefined;
    state.miterLimit = undefined;
@@ -321,6 +329,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr
  var strokeStyle = state.strokeStyle;
  var lineCap = state.lineCap;
  var lineDash = state.lineDash;
+  var lineDashOffset = state.lineDashOffset;
  var lineJoin = state.lineJoin;
  var lineWidth = state.lineWidth;
  var miterLimit = state.miterLimit;
@@ -337,16 +346,18 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyles_ = function(geometr
    if (state.currentStrokeStyle != strokeStyle ||
        state.currentLineCap != lineCap ||
        !ol.array.equals(state.currentLineDash, lineDash) ||
+        state.currentLineDashOffset != lineDashOffset ||
        state.currentLineJoin != lineJoin ||
        state.currentLineWidth != lineWidth ||
        state.currentMiterLimit != miterLimit) {
      this.instructions.push([
        ol.render.canvas.Instruction.SET_STROKE_STYLE,
-        strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, true, 1
+        strokeStyle, lineWidth, lineCap, lineJoin, miterLimit, lineDash, lineDashOffset, true, 1
      ]);
      state.currentStrokeStyle = strokeStyle;
      state.currentLineCap = lineCap;
      state.currentLineDash = lineDash;
+      state.currentLineDashOffset = lineDashOffset;
      state.currentLineJoin = lineJoin;
      state.currentLineWidth = lineWidth;
      state.currentMiterLimit = miterLimit;
--- a/src/ol/render/canvas/replay.js
+++ b/src/ol/render/canvas/replay.js
@@ -465,9 +465,9 @@ ol.render.canvas.Replay.prototype.replay_ = function(
        ++i;
        break;
      case ol.render.canvas.Instruction.SET_STROKE_STYLE:
-        var usePixelRatio = instruction[7] !== undefined ?
-            instruction[7] : true;
-        var renderedPixelRatio = instruction[8];
+        var usePixelRatio = instruction[8] !== undefined ?
+            instruction[8] : true;
+        var renderedPixelRatio = instruction[9];

        var lineWidth = /** @type {number} */ (instruction[2]);
        if (pendingStroke) {
@@ -481,13 +481,17 @@ ol.render.canvas.Replay.prototype.replay_ = function(
        context.miterLimit = /** @type {number} */ (instruction[5]);
        if (ol.has.CANVAS_LINE_DASH) {
          var lineDash = /** @type {Array.<number>} */ (instruction[6]);
+          var lineDashOffset = /** @type {number} */ (instruction[7]);
          if (usePixelRatio && pixelRatio !== renderedPixelRatio) {
            lineDash = lineDash.map(function(dash) {
              return dash * pixelRatio / renderedPixelRatio;
            });
+            lineDashOffset *= pixelRatio / renderedPixelRatio;
            instruction[6] = lineDash;
-            instruction[8] = pixelRatio;
+            instruction[7] = lineDashOffset;
+            instruction[9] = pixelRatio;
          }
+          context.lineDashOffset = lineDashOffset;
          context.setLineDash(lineDash);
        }
        prevX = NaN;
--- a/src/ol/render/canvas/textreplay.js
+++ b/src/ol/render/canvas/textreplay.js
@@ -160,6 +160,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
  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 &&
@@ -169,7 +170,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
  var setStrokeStyleInstruction = [
    ol.render.canvas.Instruction.SET_STROKE_STYLE, strokeState.strokeStyle,
    strokeState.lineWidth, strokeState.lineCap, strokeState.lineJoin,
-    strokeState.miterLimit, strokeState.lineDash, false, 1
+    strokeState.miterLimit, strokeState.lineDash, strokeState.lineDashOffset, false, 1
  ];
  this.instructions.push(setStrokeStyleInstruction);
  this.hitDetectionInstructions.push(setStrokeStyleInstruction);
@@ -177,6 +178,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
    this.replayStrokeState_ = {
      lineCap: strokeState.lineCap,
      lineDash: strokeState.lineDash,
+      lineDashOffset: strokeState.lineDashOffset,
      lineJoin: strokeState.lineJoin,
      lineWidth: strokeState.lineWidth,
      miterLimit: strokeState.miterLimit,
@@ -185,6 +187,7 @@ ol.render.canvas.TextReplay.prototype.setReplayStrokeState_ = function(strokeSta
  } 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;
@@ -253,6 +256,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
      var textStrokeStyleColor = textStrokeStyle.getColor();
      var textStrokeStyleLineCap = textStrokeStyle.getLineCap();
      var textStrokeStyleLineDash = textStrokeStyle.getLineDash();
+      var textStrokeStyleLineDashOffset = textStrokeStyle.getLineDashOffset();
      var textStrokeStyleLineJoin = textStrokeStyle.getLineJoin();
      var textStrokeStyleWidth = textStrokeStyle.getWidth();
      var textStrokeStyleMiterLimit = textStrokeStyle.getMiterLimit();
@@ -260,6 +264,8 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
          textStrokeStyleLineCap : ol.render.canvas.defaultLineCap;
      var lineDash = textStrokeStyleLineDash ?
          textStrokeStyleLineDash.slice() : ol.render.canvas.defaultLineDash;
+      var lineDashOffset = textStrokeStyleLineDashOffset !== undefined ?
+          textStrokeStyleLineDashOffset : ol.render.canvas.defaultLineDashOffset;
      var lineJoin = textStrokeStyleLineJoin !== undefined ?
          textStrokeStyleLineJoin : ol.render.canvas.defaultLineJoin;
      var lineWidth = textStrokeStyleWidth !== undefined ?
@@ -272,6 +278,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
        this.textStrokeState_ = {
          lineCap: lineCap,
          lineDash: lineDash,
+          lineDashOffset: lineDashOffset,
          lineJoin: lineJoin,
          lineWidth: lineWidth,
          miterLimit: miterLimit,
@@ -281,6 +288,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
        var textStrokeState = this.textStrokeState_;
        textStrokeState.lineCap = lineCap;
        textStrokeState.lineDash = lineDash;
+        textStrokeState.lineDashOffset = lineDashOffset;
        textStrokeState.lineJoin = lineJoin;
        textStrokeState.lineWidth = lineWidth;
        textStrokeState.miterLimit = miterLimit;
--- a/src/ol/render/webgl.js
+++ b/src/ol/render/webgl.js
@@ -22,6 +22,13 @@ if (ol.ENABLE_WEBGL) {
  ol.render.webgl.defaultLineDash = [];


+  /**
+   * @const
+   * @type {number}
+   */
+  ol.render.webgl.defaultLineDashOffset = 0;
+
+
  /**
   * @const
   * @type {string}
--- a/src/ol/render/webgl/circlereplay.js
+++ b/src/ol/render/webgl/circlereplay.js
@@ -54,6 +54,7 @@ if (ol.ENABLE_WEBGL) {
     * @type {{fillColor: (Array.<number>|null),
     *         strokeColor: (Array.<number>|null),
     *         lineDash: Array.<number>,
+     *         lineDashOffset: (number|undefined),
     *         lineWidth: (number|undefined),
     *         changed: boolean}|null}
     */
@@ -61,6 +62,7 @@ if (ol.ENABLE_WEBGL) {
      fillColor: null,
      strokeColor: null,
      lineDash: null,
+      lineDashOffset: undefined,
      lineWidth: undefined,
      changed: false
    };
@@ -380,6 +382,9 @@ if (ol.ENABLE_WEBGL) {
      var strokeStyleLineDash = strokeStyle.getLineDash();
      this.state_.lineDash = strokeStyleLineDash ?
          strokeStyleLineDash : ol.render.webgl.defaultLineDash;
+      var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+      this.state_.lineDashOffset = strokeStyleLineDashOffset ?
+          strokeStyleLineDashOffset : ol.render.webgl.defaultLineDashOffset;
      strokeStyleColor = strokeStyle.getColor();
      if (!(strokeStyleColor instanceof CanvasGradient) &&
          !(strokeStyleColor instanceof CanvasPattern)) {
--- a/src/ol/render/webgl/linestringreplay.js
+++ b/src/ol/render/webgl/linestringreplay.js
@@ -50,6 +50,7 @@ if (ol.ENABLE_WEBGL) {
     * @type {{strokeColor: (Array.<number>|null),
     *         lineCap: (string|undefined),
     *         lineDash: Array.<number>,
+     *         lineDashOffset: (number|undefined),
     *         lineJoin: (string|undefined),
     *         lineWidth: (number|undefined),
     *         miterLimit: (number|undefined),
@@ -59,6 +60,7 @@ if (ol.ENABLE_WEBGL) {
      strokeColor: null,
      lineCap: undefined,
      lineDash: null,
+      lineDashOffset: undefined,
      lineJoin: undefined,
      lineWidth: undefined,
      miterLimit: undefined,
@@ -634,6 +636,9 @@ if (ol.ENABLE_WEBGL) {
    var strokeStyleLineDash = strokeStyle.getLineDash();
    this.state_.lineDash = strokeStyleLineDash ?
        strokeStyleLineDash : ol.render.webgl.defaultLineDash;
+    var strokeStyleLineDashOffset = strokeStyle.getLineDashOffset();
+    this.state_.lineDashOffset = strokeStyleLineDashOffset ?
+        strokeStyleLineDashOffset : ol.render.webgl.defaultLineDashOffset;
    var strokeStyleLineJoin = strokeStyle.getLineJoin();
    this.state_.lineJoin = strokeStyleLineJoin !== undefined ?
        strokeStyleLineJoin : ol.render.webgl.defaultLineJoin;
--- a/src/ol/style/stroke.js
+++ b/src/ol/style/stroke.js
@@ -36,6 +36,12 @@ ol.style.Stroke = function(opt_options) {
   */
  this.lineDash_ = options.lineDash !== undefined ? options.lineDash : null;

+  /**
+   * @private
+   * @type {number|undefined}
+   */
+  this.lineDashOffset_ = options.lineDashOffset;
+
  /**
   * @private
   * @type {string|undefined}
@@ -73,6 +79,7 @@ ol.style.Stroke.prototype.clone = function() {
    color: (color && color.slice) ? color.slice() : color || undefined,
    lineCap: this.getLineCap(),
    lineDash: this.getLineDash() ? this.getLineDash().slice() : undefined,
+    lineDashOffset: this.getLineDashOffset(),
    lineJoin: this.getLineJoin(),
    miterLimit: this.getMiterLimit(),
    width: this.getWidth()
@@ -110,6 +117,16 @@ ol.style.Stroke.prototype.getLineDash = function() {
 };


+/**
+ * Get the line dash offset for the stroke.
+ * @return {number|undefined} Line dash offset.
+ * @api
+ */
+ol.style.Stroke.prototype.getLineDashOffset = function() {
+  return this.lineDashOffset_;
+};
+
+
 /**
 * Get the line join type for the stroke.
 * @return {string|undefined} Line join.
@@ -182,6 +199,18 @@ ol.style.Stroke.prototype.setLineDash = function(lineDash) {
 };


+/**
+ * Set the line dash offset.
+ *
+ * @param {number|undefined} lineDashOffset Line dash offset.
+ * @api
+ */
+ol.style.Stroke.prototype.setLineDashOffset = function(lineDashOffset) {
+  this.lineDashOffset_ = lineDashOffset;
+  this.checksum_ = undefined;
+};
+
+
 /**
 * Set the line join.
 *
@@ -238,6 +267,8 @@ ol.style.Stroke.prototype.getChecksum = function() {
            this.lineCap_.toString() : '-') + ',' +
        (this.lineDash_ ?
            this.lineDash_.toString() : '-') + ',' +
+        (this.lineDashOffset_ !== undefined ?
+            this.lineDashOffset_ : '-') + ',' +
        (this.lineJoin_ !== undefined ?
            this.lineJoin_ : '-') + ',' +
        (this.miterLimit_ !== undefined ?
--- a/test/spec/ol/renderer/canvas/replay.test.js
+++ b/test/spec/ol/renderer/canvas/replay.test.js
@@ -34,7 +34,8 @@ describe('ol.render.canvas.ReplayGroup', function() {
      });
      style2 = new ol.style.Style({
        fill: new ol.style.Fill({color: 'white'}),
-        stroke: new ol.style.Stroke({color: 'black', width: 1, lineDash: [3, 6]})
+        stroke: new ol.style.Stroke({color: 'black', width: 1, lineDash: [3, 6],
+          lineDashOffset: 2})
      });
      fillCount = 0;
      strokeCount = 0;
@@ -140,14 +141,22 @@ describe('ol.render.canvas.ReplayGroup', function() {
      expect(beginPathCount).to.be(3);
    });

-    it('applies the pixelRatio to the linedash array', function() {
-      var lineDash, lineDashCount = 0;
+    it('applies the pixelRatio to the linedash array and offset', function() {
+      var lineDash, lineDashCount = 0,
+          lineDashOffset, lineDashOffsetCount = 0;

      context.setLineDash = function(lineDash_) {
        lineDashCount++;
        lineDash = lineDash_.slice();
      };

+      Object.defineProperty(context, 'lineDashOffset', {
+        set: function(lineDashOffset_) {
+          lineDashOffsetCount++;
+          lineDashOffset = lineDashOffset_;
+        }
+      });
+
      ol.renderer.vector.renderFeature(replay, feature1, style2, 1);
      ol.renderer.vector.renderFeature(replay, feature2, style2, 1);
      replay.replay(context, 2, transform, 0, {});
@@ -155,6 +164,10 @@ describe('ol.render.canvas.ReplayGroup', function() {
      expect(lineDashCount).to.be(1);
      expect(style2.getStroke().getLineDash()).to.eql([3, 6]);
      expect(lineDash).to.eql([6, 12]);
+
+      expect(lineDashOffsetCount).to.be(1);
+      expect(style2.getStroke().getLineDashOffset()).to.be(2);
+      expect(lineDashOffset).to.be(4);
    });
  });

--- a/test/spec/ol/style/stroke.test.js
+++ b/test/spec/ol/style/stroke.test.js
@@ -19,6 +19,7 @@ describe('ol.style.Stroke', function() {
        lineCap: 'square',
        lineJoin: 'miter',
        lineDash: [1, 2, 3],
+        lineDashOffset: 2,
        miterLimit: 20,
        width: 5
      });
@@ -27,6 +28,7 @@ describe('ol.style.Stroke', function() {
      expect(original.getLineCap()).to.eql(clone.getLineCap());
      expect(original.getLineJoin()).to.eql(clone.getLineJoin());
      expect(original.getLineDash()).to.eql(clone.getLineDash());
+      expect(original.getLineDashOffset()).to.eql(clone.getLineDashOffset());
      expect(original.getMiterLimit()).to.eql(clone.getMiterLimit());
      expect(original.getWidth()).to.eql(clone.getWidth());
    });
--- a/test_rendering/spec/ol/style/expected/linestring-strokes-canvas-hidpi.png
+++ b/test_rendering/spec/ol/style/expected/linestring-strokes-canvas-hidpi.png
--- a/test_rendering/spec/ol/style/expected/linestring-strokes-canvas.png
+++ b/test_rendering/spec/ol/style/expected/linestring-strokes-canvas.png
--- a/test_rendering/spec/ol/style/expected/linestring-strokes-webgl.png
+++ b/test_rendering/spec/ol/style/expected/linestring-strokes-webgl.png
--- a/test_rendering/spec/ol/style/linestring.test.js
+++ b/test_rendering/spec/ol/style/linestring.test.js
@@ -91,6 +91,23 @@ describe('ol.rendering.style.LineString', function() {
        })
      }));
      vectorSource.addFeature(feature);
+
+      feature = new ol.Feature({
+        geometry: new ol.geom.LineString(
+            [[-20, -15], [-2, 5], [15, -15]]
+        )
+      });
+      feature.setStyle(new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: '#000000',
+          width: 2,
+          lineCap: 'square',
+          lineDash: [4, 8],
+          lineDashOffset: 6,
+          lineJoin: 'round'
+        })
+      }));
+      vectorSource.addFeature(feature);
    }

    it('tests the canvas renderer', function(done) {