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.
 |  |
Click here to see all the article in the PDF to HTML5 conversion series.
Did you know...
IDRsolutions offers a whole range of online file converters to convert PDF and Microsoft Excel, Word and Office Documents to HTML5, SVG or image formats?
It is free to use for single file conversions and also includes Developer links if you want to use our commercial software for bulk conversions. Find out more on this page
