Category: HTML5/Canvas

The Secret to the Page Flip in HTML5/Canvas for Windows8 and iOS

source: PageFlip.js

A few years back I wrote a tutorial called “The Secret Behind the Page Flip Technique” for Silverlight Developers while working as Creative Director at the experience agency, cynergy.  That blog post isn’t available anymore, and I haven’t touched Silverlight in a while, but even now, I still get several requests for the solution.

As I’ve been on-ramping my skills with HTML5, I decided to kill two birds with one stone and solve from scratch the advanced Page Flip Technique with Canvas. While underlying math is very similar, drawing, rotation and clipping are very different between Canvas in HTML5 and Silverlight, so I had to work out quite a few new tricks, highlighted below.

Continue reading