I want to implement an animation of flowing rivers on top of an Openlayers map. My doubts are if I simply should make a new canvas and position it on top of the map or if there is a more elegant way using a OL layer?
What I try to do is similar to this example using Leaflet. This animation is done using canvas lineTo() function with an interval and works with pixel coordinates drawn on a second canvas. Leaflet offers map.createPane() function which then handles the positioning for you and allows you to link a second canvas to the map.
I have the animation working in OL (jsfiddle) drawing it directly on the map canvas. The problem now is that I have to set the canvas globalAlpha property to simulate the trail effect which makes all other layers disappear. Another possibility would be to draw a semitransparent rectangle over the whole canvas, with the same negative effect of making disappear everything else on this canvas:
context.fillStyle = 'rgba(255, 255, 255, 0.1)'; context.fillRect(0, 0, canvas.width, canvas.height);
I could get it working positioning a new canvas on top of the map, but then I would have to handle all the interactions by myself.
So does there exist something similar to Leaflets map.createPane() function or any other possibility to use a second canvas linked to the same map?
PS: just to make it clear, I want something like that.
PPS: There is a new OL plugin based on windjs which looks really promising.