diff --git a/src/ol/renderer/canvas/vectorlayer.js b/src/ol/renderer/canvas/vectorlayer.js index 92287cc9b5..fe3a39aa55 100644 --- a/src/ol/renderer/canvas/vectorlayer.js +++ b/src/ol/renderer/canvas/vectorlayer.js @@ -87,11 +87,21 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay var replayGroup = this.replayGroup_; if (replayGroup && !replayGroup.isEmpty()) { var layer = this.getLayer(); + var drawOffsetX = 0; + var drawOffsetY = 0; var replayContext; if (layer.hasListener(ol.render.EventType.RENDER)) { + var drawWidth = context.canvas.width; + var drawHeight = context.canvas.height; + if (rotation) { + var drawSize = Math.round(Math.sqrt(drawWidth * drawWidth + drawHeight * drawHeight)); + drawOffsetX = (drawSize - drawWidth) / 2; + drawOffsetY = (drawSize - drawHeight) / 2; + drawWidth = drawHeight = drawSize; + } // resize and clear - this.context_.canvas.width = context.canvas.width; - this.context_.canvas.height = context.canvas.height; + this.context_.canvas.width = drawWidth; + this.context_.canvas.height = drawHeight; replayContext = this.context_; } else { replayContext = context; @@ -101,6 +111,9 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay // see http://jsperf.com/context-save-restore-versus-variable var alpha = replayContext.globalAlpha; replayContext.globalAlpha = layerState.opacity; + if (replayContext != context) { + replayContext.translate(drawOffsetX, drawOffsetY); + } var width = frameState.size[0] * pixelRatio; var height = frameState.size[1] * pixelRatio; @@ -140,7 +153,8 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay if (replayContext != context) { this.dispatchRenderEvent(replayContext, frameState, transform); - context.drawImage(replayContext.canvas, 0, 0); + context.drawImage(replayContext.canvas, -drawOffsetX, -drawOffsetY); + replayContext.translate(-drawOffsetX, -drawOffsetY); } replayContext.globalAlpha = alpha; }