Mark Stephens Mark has been working with Java and PDF since 1999 and is a big NetBeans fan. He enjoys speaking at conferences. He has an MA in Medieval History and a passion for reading.

PDF to HTML5 conversion – Vector graphics

41 sec read

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.

 

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

Mark Stephens Mark has been working with Java and PDF since 1999 and is a big NetBeans fan. He enjoys speaking at conferences. He has an MA in Medieval History and a passion for reading.

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
2 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

Leave a Reply

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

IDRsolutions Ltd 2019. All rights reserved.