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.

 



Converting PDF/ Office Documents to HTML?

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.

Leave a Reply

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

IDRsolutions Ltd 2021. All rights reserved.