html5 global,html - HTML5 overlapping of shapes with global composite operation - Stack Overflow

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,

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.

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.

Here's what it should look like:

The base image is background of canvas, i just have to control water flow.

Please suggest what to do.