Friday, June 22, 2012


Carousel Behavior using HTML5 Canvas



For one of my personal project I required carousel behavior for my Main page.
The project uses web technologies and I was interested in Canvas. I thought to share my findings.

       Let me brief this.

           1) Hold the images in a hidden control (Can be avoided)
           2) Call a function that draws the image to canvas using a timer. The function will be called as long as the timer is on.
           3)  While drawing calculate the coordinates and keep it in a cache
           4)  During mouseover - Stop the timer and make sure to draw on canvas one time.
           5)  During mousemove - find the mouse pointer location by reading the coordinates kept in cache.
          
          

It is time to get in to the details.