title: Sub pixel antialiasing canvas pixel shift algorithms in javascript
body: <p>I'm trying to work out a way of doing pseudo 3d, distorting textures with the javascript canvas.</p>
  
  <p>The best method for my needs so far has been to use <a href="http://en.wikipedia.org/wiki/Displacement_mapping" rel="nofollow">displacement maps</a> which I'm largely following from <a href="http://www.soundstep.com/blog/2012/04/25/javascript-displacement-mapping/" rel="nofollow">this tutorial and source code example</a>.</p>
  
  <p>The basic principle is to use the channel level (RGBA) from a selected pixel in the displacement map then applying a pixel shifting algorithm... all good so far.</p>
  
  <p>The problem is that this method of shifting the texture image's pixels is very binary and renders a slightly 'jagged' edge due to the fact that - it's simply shifting 'full' pixels.</p>
  
  <p>When compared to PhotoShop or some of the <a href="http://www.imagemagick.org/Usage/mapping/#displacement_maps" rel="nofollow">ImageMagick examples here</a> the javascript method looks much less realistic. This is due to PS &amp; IMs sub-pixel processing abilities whereby medians can be derived for inter-pixel data.</p>
  
  <p><strong>Question:</strong> Can anyone suggest a step which can be integrated into my algorithm to produce a gaussian/aliased smoothness to the output?</p>
  
  <p>Perhaps I can simply run the imagedata through an FFT and back again? are there any examples of this in action?</p>
  
  <p>I'm a little stumped and would very much appreciate some pointers.</p>