Canvas to PDF

HTML5 Canvas can be converted as two ways:

1. Canvas can be converted as image and image will be added into pdf. The pdf quality is not so good in this approach.

2. Canvas can be formatted / manipulated in JSON format and the JSON format can be converted as PDF. (PDF objects / elements can be created using the JSON object properties). PDF quality is so good because of all the objects are treated as PDF objects. After converting the canvas as pdf, Searching of the text is possible. This approach will be good for high quality printing.

Please check the demo for the pdf download for the quality of the PDF.

DEMO:

http://design.youprintem.com/admin/index.php

Sample JSON from canvas editor:

{"objects":[{"type":"text","originX":"left","originY":"top","left":0,"top":0,"width":3.2,"height":20.8,"fill":"black","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","text":"","fontSize":16,"fontWeight":"normal","fontFamily":"Tinos","fontStyle":"","lineHeight":1.3,"textDecoration":"","textAlign":"left","path":null,"textBackgroundColor":"","useNative":true}],"background":"#ffffff"}]

Technically,TCPDF library can be used to convert the JSON To pdf format.

also please find this sample pdf generated using the above techniques, zooming the attached pdf at any level will not affect the quality, it will be print ready high resolution pdf.

http://kpomservices.com/canvastopdf.pdf



Demo from the below application is explained below:

http://design.youprintem.com/admin/index.php


Text / Image Objects in canvas editor.

Template Editor


Converted PDF

http://kpomservices.com/canvastopdf.pdf