Add flaglike waving to 2d Context

Question

I want to make a function that displays a 2d context in a different way than usual. Sort of like the transform works. Instead of curving/changing the size of the context I want

Answer 1

You can use context.drawImage to draw 1 pixel wide vertical slices with a "wavy" y-offset.

This method gives good performance because you're drawing the entire height of the image at once instead of pixel-by-pixel. Also, the drawing process is much faster than pixel manipulation because the required pixels are blitted from the image to the canvas. And this method uses GPU acceleration when a GPU is available.

Example code and a Demo: http://jsfiddle.net/m1erickson/bcjmxr80/

 





    
Original Image
    

    
Wavy using vertical slices in canvas