This:
Like this:
<script src="jquery.js"></script> <script src="lake.js"></script> <script> $(function() { $('#lake-img').lake({ 'speed': 1, 'scale': 0.5, 'waves': 10 }); }); </script> ... <img id="lake-img" src="lake.png" style="display: none;"/>
Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element.
The new canvas element will be the same width as the original image and double the height.
Frames are precomputed, lake.js will slow down page loads but will perform well on lots of devices.
https://github.com/Alligator/lake.js