I used the keystoning technique described here to successfully add perspective to the html5 canvas cover page.
It basically happens that the image / canvas element is defined as the original texture. during each rendering cycle, this is divided into segments of a certain width (1px is the best quality), and each segment has its own height, scaled depending on its position on the x-axis of the texture.
This creates a good illusion of perspective with a given source image / texture, as shown below:
This is great for turning pages with a hard cover, the texture along with any included text gives a great idea about the perspective. However, I need to apply the same kind of trapezoid to the soft page turns. The problem is that a simple perspective conversion will not work, since the pages themselves are defined using curves, as shown below:
Currently, the page texture is scaled to the maximum curve height at any given page turning point, while the edges of the square curve of the page edge are set for the image / texture clip. Since I draw shadows and lines of pages dynamically using various standard canvas functions, this seems acceptable, since diagrams (drawn by quadratic curves) provide a natural perspective for page rotation.
However, the text itself (which is obtained from another cached canvas / image element) does not look good enough, remaining completely flat at all times.
What I would like to do is somehow apply the same slicing / segmentation / scaling trapezoid method as mentioned above, but somehow calculate the height of each 1px segment based on quadratic curves (reversed as ctx.quadraticCurveTo(); ) and the vertical position inside the canvas.
In my example, the image doesn’t actually look that bad, however, when the text gets closer to the top / bottom of the page, the warp effect should certainly be big. Not only that, but we also need to calculate the horizontal scaling factor to cut out the text closest to the page layer.
I am not able to provide any sample code that I am afraid of. but, in fact, we are doing everything very similar to the way described in the link above. And to summarize, I need to be able to use the quadratic coordinates / curve values to calculate the scale factor for each segment in the slice / render metric below:
function keystoneAndDisplayImage(ctx, img, x, y, pixelWidth, scalingFactor) { var h = img.height, w = img.width,
... but I really don't know where to start. Any help would be greatly appreciated.
EDIT:
After thinking a little more about what I hope to achieve, I realized that the perfect representation of 3D texturing through this method might be too big to ask. Therefore, I would be more than happy with any answers that can simply change the height scale and y position of each segment based on the quadratic curve defined in the html5 canvas.
Here is the best example image:
As you can see, large text remains completely straight with one texture without texture when I need 1px width segments that will be computed from the curve coefficient and y position so that it naturally follows the page rotation. Otherwise, it would be very useful if any other “hacking” or method of achieving a semi-realistic long-term effect would be very useful in this case.