Update: JPDF2HTM5 has been rebranded as BuildVu and JPDFForms has been rebranded as FormVu

PDF to HTML5 conversion – Vector graphics

Vector Graphics are very easy to use in HTML5 and easy to translate from a Java or a PDF scenario.

First off, you need a drawing surface (rather like a Graphics2D object in Java). This is the context and it is created in Javascript as follows in your HTML code.

<body onload=”draw();”>
<!– Canvas we draw the content onto –><canvas id=”pdf” width=”612.0″ height=”792.0″ />
</body>

The actual drawing is done in the draw() method using a set of primitives very similar to Java/PDF commands. Here is an excerpt.

<script type="application/javascript">function draw(){ 
var pdf_canvas=document.getElementById("pdf");
var pdf_context=pdf_canvas.getContext("2d");
pdf_context.fillStyle="rgb(0, 0, 0)"; 
pdf_context.beginPath();
pdf_context.moveTo(206,288);
pdf_context.bezierCurveTo(208,289,220,291,222,288);
pdf_context.bezierCurveTo(225,286,222,278,216,273);
pdf_context.closePath();

The hardest thing from a PDF perspective is the lack of non-RGB colorspaces which means the color values need to be pre-converted. Shape conversion works pretty well as these 2 examples show – click on the images to open the HTML.

Vector Graphics on HTML page

Click here to see all the article in the PDF to HTML5 conversion series.

 

Related Posts:

The following two tabs change content below.

Mark Stephens

System Architect and Lead Developer at IDRSolutions
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.
Markee174

About 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.

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>