diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js
index c4dd336dda..3af236700e 100644
--- a/src/ol/render/canvas/canvasimmediate.js
+++ b/src/ol/render/canvas/canvasimmediate.js
@@ -272,10 +272,11 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(flatCoordinates, off
     if (rotation !== 0 || this.imageScale_ != 1) {
       var centerX = x + this.imageAnchorX_;
       var centerY = y + this.imageAnchorY_;
-      ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY);
-      ol.transform.scale(localTransform, this.imageScale_, this.imageScale_);
-      ol.transform.rotate(localTransform, rotation);
-      ol.transform.translate(localTransform, -centerX, -centerY);
+      ol.transform.compose(localTransform,
+          centerX, centerY,
+          this.imageScale_, this.imageScale_,
+          rotation,
+          -centerX, -centerY);
       context.setTransform.apply(context, localTransform);
     }
     context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_,
@@ -320,11 +321,11 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offse
     var x = pixelCoordinates[offset] + this.textOffsetX_;
     var y = pixelCoordinates[offset + 1] + this.textOffsetY_;
     if (this.textRotation_ !== 0 || this.textScale_ != 1) {
-      var localTransform = ol.transform.reset(this.tmpLocalTransform_);
-      ol.transform.translate(localTransform, x, y);
-      ol.transform.scale(localTransform, this.textScale_, this.textScale_);
-      ol.transform.rotate(localTransform, this.textRotation_);
-      ol.transform.translate(localTransform, -x, -y);
+      var localTransform = ol.transform.compose(this.tmpLocalTransform_,
+          x, y,
+          this.textScale_, this.textScale_,
+          this.textRotation_,
+          -x, -y);
       context.setTransform.apply(context, localTransform);
     }
     if (this.textStrokeState_) {
diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js
index 9f1085ccae..441188e481 100644
--- a/src/ol/render/canvas/canvasreplay.js
+++ b/src/ol/render/canvas/canvasreplay.js
@@ -331,10 +331,8 @@ ol.render.canvas.Replay.prototype.replay_ = function(
           if (scale != 1 || rotation !== 0) {
             var centerX = x + anchorX;
             var centerY = y + anchorY;
-            ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY);
-            ol.transform.scale(localTransform, scale, scale);
-            ol.transform.rotate(localTransform, rotation);
-            ol.transform.translate(localTransform, -centerX, -centerY);
+            ol.transform.compose(localTransform,
+                centerX, centerY, scale, scale, rotation, -centerX, -centerY);
             context.transform.apply(context, localTransform);
           }
           var alpha = context.globalAlpha;
@@ -390,10 +388,7 @@ ol.render.canvas.Replay.prototype.replay_ = function(
           x = pixelCoordinates[d] + offsetX;
           y = pixelCoordinates[d + 1] + offsetY;
           if (scale != 1 || rotation !== 0) {
-            ol.transform.translate(ol.transform.reset(localTransform), x, y);
-            ol.transform.scale(localTransform, scale, scale);
-            ol.transform.rotate(localTransform, rotation);
-            ol.transform.translate(localTransform, -x, -y);
+            ol.transform.compose(localTransform, x, y, scale, scale, rotation, -x, -y);
             context.transform.apply(context, localTransform);
           }
 
@@ -1897,11 +1892,11 @@ ol.render.canvas.ReplayGroup.prototype.finish = function() {
 ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
     coordinate, resolution, rotation, skippedFeaturesHash, callback) {
 
-  var transform = ol.transform.reset(this.hitDetectionTransform_);
-  ol.transform.translate(transform, 0.5, 0.5);
-  ol.transform.scale(transform, 1 / resolution, -1 / resolution);
-  ol.transform.rotate(transform, -rotation);
-  ol.transform.translate(transform, -coordinate[0], -coordinate[1]);
+  var transform = ol.transform.compose(this.hitDetectionTransform_,
+      0.5, 0.5,
+      1 / resolution, -1 / resolution,
+      -rotation,
+      -coordinate[0], -coordinate[1]);
 
   var context = this.hitDetectionContext_;
   context.clearRect(0, 0, 1, 1);
diff --git a/src/ol/renderer/canvas/canvaslayerrenderer.js b/src/ol/renderer/canvas/canvaslayerrenderer.js
index d4dbdfa296..17a32158c1 100644
--- a/src/ol/renderer/canvas/canvaslayerrenderer.js
+++ b/src/ol/renderer/canvas/canvaslayerrenderer.js
@@ -184,14 +184,14 @@ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod;
 ol.renderer.canvas.Layer.prototype.getTransform = function(frameState, offsetX) {
   var viewState = frameState.viewState;
   var pixelRatio = frameState.pixelRatio;
-  var transform = ol.transform.reset(this.transform_);
-  ol.transform.translate(transform,
-      pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[1] / 2);
-  ol.transform.scale(transform,
-      pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution);
-  ol.transform.rotate(transform, -viewState.rotation);
-  return ol.transform.translate(transform,
-      -viewState.center[0] + offsetX, -viewState.center[1]);
+  var dx1 = pixelRatio * frameState.size[0] / 2;
+  var dy1 = pixelRatio * frameState.size[1] / 2;
+  var sx = pixelRatio / viewState.resolution;
+  var sy = -sx;
+  var angle = -viewState.rotation;
+  var dx2 = -viewState.center[0] + offsetX;
+  var dy2 = -viewState.center[1];
+  return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
 };
 
 
diff --git a/src/ol/renderer/canvas/canvasmaprenderer.js b/src/ol/renderer/canvas/canvasmaprenderer.js
index ee9199018c..9aff0c3daf 100644
--- a/src/ol/renderer/canvas/canvasmaprenderer.js
+++ b/src/ol/renderer/canvas/canvasmaprenderer.js
@@ -120,17 +120,15 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ = function(type, frameSta
  * @return {!ol.Transform} Transform.
  */
 ol.renderer.canvas.Map.prototype.getTransform = function(frameState) {
-  var pixelRatio = frameState.pixelRatio;
   var viewState = frameState.viewState;
-  var resolution = viewState.resolution;
-  var transform = ol.transform.reset(this.transform_);
-  ol.transform.translate(transform,
-      this.canvas_.width / 2, this.canvas_.height / 2);
-  ol.transform.scale(transform,
-      pixelRatio / resolution, -pixelRatio / resolution);
-  ol.transform.rotate(transform, -viewState.rotation);
-  return ol.transform.translate(transform,
-      -viewState.center[0], -viewState.center[1]);
+  var dx1 = this.canvas_.width / 2;
+  var dy1 = this.canvas_.height / 2;
+  var sx = frameState.pixelRatio / viewState.resolution;
+  var sy = -sx;
+  var angle = -viewState.rotation;
+  var dx2 = -viewState.center[0];
+  var dy2 = -viewState.center[1];
+  return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2);
 };
 
 
diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js
index d88fe8c725..8a6a61c816 100644
--- a/src/ol/renderer/canvas/canvastilelayerrenderer.js
+++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js
@@ -326,11 +326,11 @@ ol.renderer.canvas.TileLayer.prototype.renderTileImages = function(context, fram
   if (hasRenderListeners) {
     var dX = drawOffsetX - offsetX / drawScale + offsetX;
     var dY = drawOffsetY - offsetY / drawScale + offsetY;
-    var imageTransform = ol.transform.reset(this.imageTransform_);
-    ol.transform.translate(imageTransform, drawSize / 2 - dX, drawSize / 2 - dY);
-    ol.transform.scale(imageTransform, pixelScale, -pixelScale);
-    ol.transform.rotate(imageTransform, -rotation);
-    ol.transform.translate(imageTransform, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
+    var imageTransform = ol.transform.compose(this.imageTransform_,
+        drawSize / 2 - dX, drawSize / 2 - dY,
+        pixelScale, -pixelScale,
+        -rotation,
+        -center[0] + dX / pixelScale, -center[1] - dY / pixelScale);
     this.dispatchRenderEvent(renderContext, frameState, imageTransform);
   }
   if (rotation || hasRenderListeners) {
diff --git a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js
index 6b3bae9a00..d073d947b2 100644
--- a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js
+++ b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js
@@ -148,13 +148,11 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function(
     if (pixelSpace) {
       origin = ol.extent.getTopLeft(tileExtent);
       tileTransform = ol.transform.reset(this.tmpTransform_);
-      ol.transform.translate(tileTransform, offsetX, offsetY);
-      ol.transform.scale(tileTransform,
-          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution);
-      ol.transform.rotate(tileTransform, rotation);
-      ol.transform.translate(tileTransform,
-          (origin[0] - center[0]) / tilePixelResolution,
-          (center[1] - origin[1]) / tilePixelResolution);
+      tileTransform = ol.transform.compose(this.tmpTransform_,
+          offsetX, offsetY,
+          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution,
+          rotation,
+          (origin[0] - center[0]) / tilePixelResolution, (center[1] - origin[1]) / tilePixelResolution);
     } else {
       tileTransform = transform;
     }
diff --git a/src/ol/renderer/dom/domimagelayerrenderer.js b/src/ol/renderer/dom/domimagelayerrenderer.js
index 5fbdaa9dcd..791fe354e0 100644
--- a/src/ol/renderer/dom/domimagelayerrenderer.js
+++ b/src/ol/renderer/dom/domimagelayerrenderer.js
@@ -118,14 +118,13 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt
     var imageExtent = image.getExtent();
     var imageResolution = image.getResolution();
     var transform = ol.transform.create();
-    ol.transform.translate(transform,
-        frameState.size[0] / 2, frameState.size[1] / 2);
-    ol.transform.scale(transform,
-        imageResolution / viewResolution, imageResolution / viewResolution);
-    ol.transform.rotate(transform, viewRotation);
-    ol.transform.translate(transform,
+    ol.transform.compose(transform,
+        frameState.size[0] / 2, frameState.size[1] / 2,
+        imageResolution / viewResolution, imageResolution / viewResolution,
+        viewRotation,
         (imageExtent[0] - viewCenter[0]) / imageResolution,
         (viewCenter[1] - imageExtent[3]) / imageResolution);
+
     if (image != this.image_) {
       var imageElement = image.getImage(this);
       // Bootstrap sets the style max-width: 100% for all images, which breaks
diff --git a/src/ol/renderer/dom/dommaprenderer.js b/src/ol/renderer/dom/dommaprenderer.js
index ce3f65758d..2571104e2e 100644
--- a/src/ol/renderer/dom/dommaprenderer.js
+++ b/src/ol/renderer/dom/dommaprenderer.js
@@ -123,15 +123,14 @@ ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = function(type, frameState)
     var context = this.context_;
     var canvas = context.canvas;
 
-    var transform = ol.transform.reset(this.transform_);
-    ol.transform.translate(transform, canvas.width / 2, canvas.height / 2);
-    ol.transform.scale(transform,
-        pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution);
-    ol.transform.rotate(transform, -viewState.rotation);
-    ol.transform.translate(transform,
+    var transform = ol.transform.compose(this.transform_,
+        canvas.width / 2, canvas.height / 2,
+        pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution,
+        -rotation,
         -viewState.center[0], -viewState.center[1]);
+
     var vectorContext = new ol.render.canvas.Immediate(context, pixelRatio,
-        extent, this.transform_, rotation);
+        extent, transform, rotation);
     var composeEvent = new ol.render.Event(type, map, vectorContext,
         frameState, context, null);
     map.dispatchEvent(composeEvent);
diff --git a/src/ol/renderer/dom/domtilelayerrenderer.js b/src/ol/renderer/dom/domtilelayerrenderer.js
index 2bb751eec7..3bf9b7914d 100644
--- a/src/ol/renderer/dom/domtilelayerrenderer.js
+++ b/src/ol/renderer/dom/domtilelayerrenderer.js
@@ -210,13 +210,13 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta
     }
     resolution = tileLayerZ.getResolution();
     origin = tileLayerZ.getOrigin();
-    ol.transform.translate(ol.transform.reset(transform),
-        frameState.size[0] / 2, frameState.size[1] / 2);
-    ol.transform.scale(transform,
-        resolution / viewState.resolution, resolution / viewState.resolution);
-    ol.transform.rotate(transform,  viewState.rotation);
-    ol.transform.translate(transform,
+
+    ol.transform.compose(transform,
+        frameState.size[0] / 2, frameState.size[1] / 2,
+        resolution / viewState.resolution, resolution / viewState.resolution,
+        viewState.rotation,
         (origin[0] - center[0]) / resolution, (center[1] - origin[1]) / resolution);
+
     tileLayerZ.setTransform(transform);
     if (tileLayerZKey in newTileLayerZKeys) {
       for (j = tileLayerZKey - 1; j >= 0; --j) {
diff --git a/src/ol/renderer/dom/domvectorlayerrenderer.js b/src/ol/renderer/dom/domvectorlayerrenderer.js
index 80186217ac..5f4d0acff4 100644
--- a/src/ol/renderer/dom/domvectorlayerrenderer.js
+++ b/src/ol/renderer/dom/domvectorlayerrenderer.js
@@ -119,13 +119,11 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS
   var imageWidth = viewWidth * pixelRatio;
   var imageHeight = viewHeight * pixelRatio;
 
-  var transform = ol.transform.reset(this.transform_);
-  ol.transform.translate(transform,
-      pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2);
-  ol.transform.scale(transform,
-      pixelRatio / viewResolution, -pixelRatio / viewResolution);
-  ol.transform.rotate(transform, -viewRotation);
-  ol.transform.translate(transform, -viewCenter[0], -viewCenter[1]);
+  var transform = ol.transform.compose(this.transform_,
+      pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2,
+      pixelRatio / viewResolution, -pixelRatio / viewResolution,
+      -viewRotation,
+      -viewCenter[0], -viewCenter[1]);
 
   var context = this.context_;
 
diff --git a/src/ol/renderer/maprenderer.js b/src/ol/renderer/maprenderer.js
index 314a3321f7..98d8c2580f 100644
--- a/src/ol/renderer/maprenderer.js
+++ b/src/ol/renderer/maprenderer.js
@@ -69,13 +69,13 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) {
   var pixelToCoordinateTransform = frameState.pixelToCoordinateTransform;
   goog.asserts.assert(coordinateToPixelTransform,
       'frameState has a coordinateToPixelTransform');
-  ol.transform.translate(ol.transform.reset(coordinateToPixelTransform),
-      frameState.size[0] / 2, frameState.size[1] / 2);
-  ol.transform.scale(coordinateToPixelTransform,
-      1 / viewState.resolution, -1 / viewState.resolution);
-  ol.transform.rotate(coordinateToPixelTransform, -viewState.rotation);
-  ol.transform.translate(coordinateToPixelTransform,
+
+  ol.transform.compose(coordinateToPixelTransform,
+      frameState.size[0] / 2, frameState.size[1] / 2,
+      1 / viewState.resolution, -1 / viewState.resolution,
+      -viewState.rotation,
       -viewState.center[0], -viewState.center[1]);
+
   ol.transform.invert(
       ol.transform.setFromArray(pixelToCoordinateTransform, coordinateToPixelTransform));
 };
diff --git a/src/ol/source/imagevectorsource.js b/src/ol/source/imagevectorsource.js
index d672ee254e..f7e9324523 100644
--- a/src/ol/source/imagevectorsource.js
+++ b/src/ol/source/imagevectorsource.js
@@ -215,10 +215,14 @@ ol.source.ImageVector.prototype.getStyleFunction = function() {
  * @private
  */
 ol.source.ImageVector.prototype.getTransform_ = function(center, resolution, pixelRatio, size) {
-  var transform = ol.transform.reset(this.transform_);
-  ol.transform.translate(transform, size[0] / 2, size[1] / 2);
-  ol.transform.scale(transform, pixelRatio / resolution, -pixelRatio / resolution);
-  return ol.transform.translate(transform, -center[0], -center[1]);
+  var dx1 = size[0] / 2;
+  var dy1 = size[1] / 2;
+  var sx = pixelRatio / resolution;
+  var sy = -sx;
+  var dx2 = -center[0];
+  var dy2 = -center[1];
+
+  return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, 0, dx2, dy2);
 };