lake.js not working

lake.js not working

I was just trying to use lake.js , its a canvas plugin, that basically creates a lake effect with any image , so i have the following HTML:

  1. <div id="lakes">
  2. <img id="lake-img" src="img/lake.png" style="display: none;" height="200" width="500" />
  3. </div>
and init teh plugin like so:

  2. $(function () {
  3.    $('#lake-img').lake({
  4.              'waves': 6,
  5.             'scale': 0.5
  6.              });
  7. });
This is virtually similar to what they have done on the demo site HERE.

FIDDLE HERE , i know the plugin is ancient , but i would still like to use it for demo purpose. , The problem is , in my demo it just does't create the lake effect ,  just get a empty canvas element in the dev tools when i check. WHY ?