CODEWITHSUNDEEP
javascriptcanvasprintinghtml5-canvasfabricjs
Mohd. Monis
Mohd. Monis

Reputation: 199

Html5 canvas size to print size


I have one small issue though I have searched blogs, articles, and some stackoverflow questions but there is still a small confusion so I thought to put a question.
I need to adjust canvas for the printing, how can I do ? actually the maximum limit for printing is 6.50' x 15.75' (inches), size can vary in this range. If I am not wrong DPI is irrespective of screens (they are more useful for printing devices) on which we are working but how can it dominate the size on canvas? for e.g.

6.50 * 72 = 468 px 15.75 * 72 = 1134 px

or 6.50 * 96 = 624 px 15.75 *96 = 1512 px

or 6.50 * 300 = 1950 px 15.75 * 300 = 4725 px

My work area for canvas cannot be exceeded more than 703px X 391px; so what exactly I need to adjust for my canvas size to get exact required printing? or am I missing something? what scale factor to considered for drawing in a confined region and then printing on various sizes. any suggestions or links will be grateful.

Thanks

PS: I am using fabricjs for all my canvas stuff.

Upvotes: 1

Views: 1350

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

Fabric js helps you in this providing a zoom factor.

you can define your canvas as big as you need, with your limit respecting the aspect ratio of your print size.

Let's say you want to print a 6 x 15 inch sheet.

you will define a canvas that is in aspect ration of 6/15 so 2/5.

700px x 280px fit this aspect ratio and your canvas size limit.

You will work on your canvas normally and when is time to export your graphic file you can:

Define the final size

6 x 15 inch at 300dpi = 1800 x 4500 pixels.

Find the ratio between your canvas and the final canvas:

4500 / 700 = 6.428

you can then do

canvas.toDataUrl({ multiplier: 6.428 }) and you should obtain your file of the right size.

Upvotes: 1

Related Questions