diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js
index 3c497b3290..14c7910ab3 100644
--- a/src/ol/renderer/canvas/canvastilelayerrenderer.js
+++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js
@@ -26,9 +26,9 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
 
   /**
    * @private
-   * @type {!Object.<string, Array.<ol.Extent>>}
+   * @type {!Object.<string, Array.<ol.TileCoord>>}
    */
-  this.clipExtents_ = {};
+  this.clipTileCoords_ = {};
 
   /**
    * @private
@@ -95,8 +95,9 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
   var tileGrid = source.getTileGridForProjection(projection);
   var tilesToDraw = this.renderedTiles_;
 
-  var clipExtent, clipExtents, currentZ, h, i, ii, j, jj, left, origin, tile;
-  var tileExtent, tilePixelSize, top, w;
+  var clipExtent, clipH, clipLeft, clipOrigin, clipTileCoord, clipTileCoords;
+  var clipTop, clipW, currentZ, h, i, ii, j, jj, left, origin, tile, tileExtent;
+  var tilePixelSize, top, w;
   for (i = 0, ii = tilesToDraw.length; i < ii; ++i) {
     tile = tilesToDraw[i];
     tileExtent = tileGrid.getTileCoordExtent(
@@ -112,8 +113,8 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
         offsetX + Math.round((origin[0] - center[0]) * pixelScale);
     top = Math.round((origin[1] - tileExtent[3]) * pixelScale / h) * h +
         offsetY + Math.round((center[1] - origin[1]) * pixelScale);
-    clipExtents = this.clipExtents_[tile.tileCoord.toString()];
-    if (clipExtents) {
+    clipTileCoords = this.clipTileCoords_[tile.tileCoord.toString()];
+    if (clipTileCoords) {
       // Create a clip mask for regions in this low resolution tile that will be
       // filled by a higher resolution tile
       renderContext.save();
@@ -125,16 +126,21 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
       renderContext.lineTo(left + w, top + h);
       renderContext.closePath();
       // clockwise (inner rings) for lower resolution tiles
-      for (j = 0, jj = clipExtents.length; j < jj; ++j) {
-        clipExtent = clipExtents[j];
-        renderContext.moveTo((clipExtent[0] - center[0]) * pixelScale + offsetX,
-            (center[1] - clipExtent[1]) * pixelScale + offsetY);
-        renderContext.lineTo((clipExtent[0] - center[0]) * pixelScale + offsetX,
-            (center[1] - clipExtent[3]) * pixelScale + offsetY);
-        renderContext.lineTo((clipExtent[2] - center[0]) * pixelScale + offsetX,
-            (center[1] - clipExtent[3]) * pixelScale + offsetY);
-        renderContext.lineTo((clipExtent[2] - center[0]) * pixelScale + offsetX,
-            (center[1] - clipExtent[1]) * pixelScale + offsetY);
+      for (j = 0, jj = clipTileCoords.length; j < jj; ++j) {
+        clipTileCoord = clipTileCoords[j];
+        clipExtent = tileGrid.getTileCoordExtent(clipTileCoord);
+        clipOrigin = ol.extent.getBottomLeft(tileGrid.getTileCoordExtent(
+            tileGrid.getTileCoordForCoordAndZ(center, clipTileCoord[0])));
+        clipW = Math.round(ol.extent.getWidth(clipExtent) * pixelScale);
+        clipH = Math.round(ol.extent.getHeight(clipExtent) * pixelScale);
+        clipLeft = Math.round((clipExtent[0] - clipOrigin[0]) * pixelScale / clipW) * clipW +
+            offsetX + Math.round((clipOrigin[0] - center[0]) * pixelScale);
+        clipTop = Math.round((clipOrigin[1] - clipExtent[3]) * pixelScale / clipH) * clipH +
+            offsetY + Math.round((center[1] - clipOrigin[1]) * pixelScale);
+        renderContext.moveTo(clipLeft, clipTop + clipH);
+        renderContext.lineTo(clipLeft, clipTop);
+        renderContext.lineTo(clipLeft + clipW, clipTop);
+        renderContext.lineTo(clipLeft + clipW, clipTop + clipH);
         renderContext.closePath();
       }
       renderContext.clip();
@@ -142,7 +148,7 @@ ol.renderer.canvas.TileLayer.prototype.composeFrame = function(
     tilePixelSize = source.getTilePixelSize(currentZ, pixelRatio, projection);
     renderContext.drawImage(tile.getImage(), tileGutter, tileGutter,
         tilePixelSize[0], tilePixelSize[1], left, top, w, h);
-    if (clipExtents) {
+    if (clipTileCoords) {
       renderContext.restore();
     }
   }
@@ -260,9 +266,9 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
     }
   }
   this.renderedTiles_ = renderables;
-  ol.object.clear(this.clipExtents_);
+  ol.object.clear(this.clipTileCoords_);
   if (!(tileSource.getOpaque(projection) && layerState.opacity == 1)) {
-    var clipExtents = this.clipExtents_;
+    var clipTileCoords = this.clipTileCoords_;
     var tileCoord;
     for (i = renderables.length - 1; i >= 0; --i) {
       tileCoord = renderables[i].getTileCoord();
@@ -275,10 +281,10 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
                 tile = tiles[key];
                 if (tileRange.contains(tile.getTileCoord()) &&
                     tile.getState() == ol.TileState.LOADED) {
-                  if (!(key in clipExtents)) {
-                    clipExtents[key] = [];
+                  if (!(key in clipTileCoords)) {
+                    clipTileCoords[key] = [];
                   }
-                  clipExtents[key].push(tileGrid.getTileCoordExtent(tileCoord));
+                  clipTileCoords[key].push(tileCoord);
                   return true;
                 }
               }