Кокановић блог

There are a lot of examples with canvas tag these days. As if world as a whole is preparing for imminent arrival of HTML5;) I’m not going to talk about canvas element – if you are a designer or developer and you still didn’t heard for it, then you will…soon. Anyway, there were nice post I found on DZone which summarizes some great examples of canvas usage, you can find it here (examples are at the bottom, if you’re not interested in theory). Another great summary post emerged few days after with a lot of cool examples (some of those examples are useless to open in anything other then Chrome, even if you turn TraceMonkey in Firefox). What caught my attention was something I saw a lot earlier with a experiment done a long ago (“long ago”  is funny term when speaking in technology context). It’s example of waving image, imitating water reflection. You can see original here. At the end of that page, you can read that that guy won’t add fading effect. This is where I jump in.

I took that code thinking that it will be easy. Long story short, with a complete rewrite, I managed to add fade out opacity. It turned harder then I thought it will be. Principle is the same – draw start image once and then refresh lower part every 25ms to make animation effect. In every frame, we go top down and for every row, new value of offset is calculated based on sin function. Frequency is set so one complete sine period is always shown.

Interesting thing is, I also managed to slow down complete animation by factor of 5-10x. Why is that? Original example uses drawImage() function and draws row-by-row. Because I use alpha channel, I had to resolve to putImageData() function (is this can be done with drawImage()?) and use it for every pixel! Basically, if image is 250×50, original example have 50 drawings (for every row) and I have 12,500 pixel putting in image data. Needless to say, bigger images will hardly be of any value for this effect with this approach.

Once again, you can see it for yourself and look at the code here.