Make and animate wave in canvas

Question

I’m looking for a way to create a wave in a shape designed in canvas. After much research I found something that is pretty close to what I want:

Answer 1

I'd like to create a ‘realistic’ water movement with good fluid dynamics, collisions of this wave with the edges of a custom container..

Oh boy.. That is quite a mouthful. You should probably ask your Question here: gamedev.stackexchange

Anyways, have you tried to program any sort of wave yet, or are you just looking for WaveCreator.js ?

Go and Google some Non-language-specific Guides on how to create 2D water.

If you are a beginner, then start with something simple to get the idea behind things. How about creating a bunch of Boxes for "minecraft-style" water ?

Here every "line" of water could be represented as a position in an Array. Then loop through it and set the "height" of the water based on the previous Array Index. (You could smooth the water out by either making the blocks very thin (More work for your program!) or by smoothing out the edges and giving them an angle based on the other Squares.

I think this could be a neat solution. Anyhow. Hope that gave you some ideas.