title: HTML5 overlapping of shapes with global composite operation
body: <p>I want to do this animation - Water level rises in sea engulfing a small mountain having pits. When water recedes some of it stays in the pockets and again when water level rises it all becomes one. This animation continues indefinitely. Now i have tried doing this by using two approaches,</p>
  
  <p>1) Drawing and clearing the water in pool with the flow of water in sea. 
  ctx.bezierCurveTo(x1,y1,x2,y2,end_x,end_y); 
  I changed first and second control points with the flow of water to make the base change from little flat to spherical and vice-versa. But wasn't smooth and also second pit has irregular base so impossible.</p>
  
  <p>2) I made the required pockets filled with water and played with opacity so that pocket water mixes with sea water when submerged. Again this approach doesn't give smooth look.</p>
  
  <p>Here's what it should look like:</p>
  
  <p><img src="https://s3.postimg.org/7f430a1ir/Picture1.jpg" alt="https://s3.postimg.org/7f430a1ir/Picture1.jpg"></p>
  
  <p>The base image is background of canvas, i just have to control water flow.</p>
  
  <p>Please suggest what to do.</p>