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.