Fix render context utility functions and feature-move-animation example

examples/feature-move-animation.html

@@ -3,10 +3,10 @@ layout: example.html
 title: Marker Animation
 shortdesc: Demonstrates how to move a feature along a line.
 docs: >
-  This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
+  This example shows how to use <b>postrender</b> events and a <b>vector context</b> to
-  animate a (marker) feature along a line. In this example an encoded polyline
+  animate a marker feature along a line. In this example an encoded polyline
   is being used.
-tags: "animation, feature, postcompose, polyline"
+tags: "animation, feature, postrender, polyline"
 cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
     value: Your Bing Maps Key from http://www.bingmapsportal.com/ here

examples/feature-move-animation.js

@@ -7,6 +7,7 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from '../src/ol/style.js';
+import {getVectorContext} from '../src/ol/render.js';
 
 // This long string is placed here due to jsFiddle limitations.
 // It is usually loaded with AJAX.
@@ -142,7 +143,7 @@ const map = new Map({
 });
 
 const moveFeature = function(event) {
-  const vectorContext = event.vectorContext;
+  const vectorContext = getVectorContext(event);
   const frameState = event.frameState;
 
   if (animating) {
@@ -176,7 +177,7 @@ function startAnimation() {
     geoMarker.setStyle(null);
     // just in case you pan somewhere else
     map.getView().setCenter(center);
-    map.on('postcompose', moveFeature);
+    vectorLayer.on('postrender', moveFeature);
     map.render();
   }
 }

src/ol/render.js

@@ -2,7 +2,13 @@
  * @module ol/render
  */
 import {DEVICE_PIXEL_RATIO} from './has.js';
-import {apply as applyTransform, create as createTransform, scale as scaleTransform} from './transform.js';
+import {
+  apply as applyTransform,
+  create as createTransform,
+  invert as invertTransform,
+  multiply as multiplyTransform,
+  scale as scaleTransform
+} from './transform.js';
 import CanvasImmediateRenderer from './render/canvas/Immediate.js';
 
 
@@ -79,14 +85,17 @@ export function toContext(context, opt_options) {
 }
 
 /**
- * Gets a vector context for drawing to 
+ * Gets a vector context for drawing to the event's canvas.
  * @param {import("./render/Event.js").default} event Render event.
+ * @returns {CanvasImmediateRenderer} Vector context.
+ * @api
  */
 export function getVectorContext(event) {
   const frameState = event.frameState;
+  const transform = multiplyTransform(invertTransform(event.pixelTransform.slice()), frameState.coordinateToPixelTransform);
   return new CanvasImmediateRenderer(
-    event.context, frameState.pixelRatio, frameState.extent,
+    event.context, frameState.pixelRatio, frameState.extent, transform,
-    event.pixelTransform, frameState.viewState.rotation);
+    frameState.viewState.rotation);
 }
 
 /**
@@ -94,10 +103,11 @@ export function getVectorContext(event) {
  * @param {import("./render/Event.js").default} event Render event.
  * @param {import("./pixel.js").Pixel} pixel Css pixel relative to the top-left
  * corner of the map viewport.
+ * @returns {import("./pixel.js").Pixel} Pixel on the event's canvas context.
  * @api
  */
 export function getPixelFromPixel(event, pixel) {
   const result = pixel.slice(0);
-  applyTransform(event.pixelTransform, pixel);
+  applyTransform(invertTransform(event.pixelTransform.slice()), result);
   return result;
 }