Mark Stephens Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

PDF to HTML conversion – clipping

1 min read

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.

pdf_context.save();

and then restore it afterwards.

pdf_context.restore();

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.

no clip

clip

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?

Mark Stephens Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

Converting your PDF files to HTML5 with BuildVu 

Recently we announced our updated product range for 2018 and are rebranding some existing products, like JPDF2HTML5 which has been renamed to BuildVu. It...
Georgia Ingham
3 min read

Favourite resources from our HTML development team

As the web progresses and grows, so do the technologies that come along with it. Trying to keep on top of everything you need...
Ovidijus Okinskas
1 min read

How HTML5 Javadocs in Java 9 will make your…

Here at IDRsolutions we are very excited about Java 9 and have written a series of articles explaining some of the main features. In...
Rob
1 min read

Leave a Reply

Your email address will not be published. Required fields are marked *