One of the really powerful features in the PDF file format is clipping. You can define a clip as any irregular shape and only items within this will appear. So if you defined a circle as the clip and the filled in the whole page you would just see a filled circle. PDF files make a great deal of use of this feature for displaying images and shapes.
HTML5 canvas also has a clip and it works in a very similar way. You create a shape and instead of using it as a fill or a stroke, you use it as a clip. Here is some sample code to set a triangular clip (it also works with curves).
pdf_context.beginPath(); pdf_context.moveTo(0,0); pdf_context.lineTo(0,100); pdf_context.lineTo(100,100); pdf_context.lineTo(0,0); pdf_context.clip();
Any shapes now drawn on the canvas will only be visible if inside this clipped area. Great, but how do you then alter the clip or unset it?
You can either set a new clip or track the clip and then unset. The easiest way to do this is save the status before you apply the clip but you need to be careful as you will lose any other settings you changed since the save.
and then restore it afterwards.
Then you can apply a new clip.
And here are some screenshots to show the difference using the clip can make in the HTML5 output.
If you want to use clipping in our PDF to HTML conversion, it is enabled in the latest version or added with this command.
/** * include clip in HTML */HTMLoutput.setBooleanValue(HTMLDisplay.IncludeClip, true);
Any HTML features you would to see explained?
Do you need to solve any of these problems?
|Display PDF documents in a Web app|
|Use PDF Forms in a web browser|
|Convert PDF Documents to an image|
|Work with PDF Documents in Java|
Are you a Developer working with PDF files?
|Learn more about PDF file format|