title: Heat distortion / underwater visual effect in HTML5 Canvas
body: <p>We are developing a trading card video game (for both desktop and mobiles, so must ideally be very fast for mobiles else we will have to desactivate this graphical feature on those lower-end devices) using HTML5 and canvas technologies.</p>
  
  <p>We figured out that it would add a lot of life to our top-view environments (levels) if we could implement some heat distortion (or some kind of underwater/turbulence) effect on some specific canvas/scene elements, like on a grass-only terrain and on vegetation props, in order to visually simulate (to some extend) the effect of randomly-animated wind turbulence on those specific canvas/scene elements (ideally using masks, in order to affect only a pre-determined region of a canvas).</p>
  
  <p>Controls to make the effect strong or subtle, depending on wind force, as well as controls over wind direction would then be quite easily achievable. We just need to find some solid base to start the work.</p>
  
  <p>Just to be sure that you correctly understand the effect we need, look at those videos: <a href="http://www.youtube.com/watch?v=brcMUHPNy-Y" rel="nofollow">http://www.youtube.com/watch?v=brcMUHPNy-Y</a> / <a href="http://www.youtube.com/watch?v=nZtmLCaYoHc" rel="nofollow">http://www.youtube.com/watch?v=nZtmLCaYoHc</a></p>
  
  <p>We've Googled a lot for this and haven't found any pre-made solution to achieve this relatively-simple effect. We want to avoid using WebGL and threeJS if possible, as well as pre-rendering or pre-animate any graphics.</p>
  
  <p>Any idea of how to achieve this effect using code?</p>