Draw Image on Canvas and export print quality image

Question

What I am Doing:

I am using Fabric.js to develop a canvas application. Users can place image or texts in the canvas

What I want to Do:

When the user downloads the image,the user should be able to print it. Currently I am working on length: 5 X 8 (inches) . In Fabric.js , toDataURL() function by default will give 72 DPI image and I am planning on using PHP to convert it into 300dpi image.

So to create a high quality image of 5X8 with 300dpi , the image should be 1500px X 2400px . But I cant give that much of space for the user since it wont be very intuitive.

So, I did what was suggested in the below link

What is the best practice to export canvas with high quality images?

Problem:

But I am facing a trouble. When the user places a text or image ,it appears very small.When I click on a text or image, the corners and borders are barely visible. It considers the relative size of the canvas. Please see the Fiddle

Answer 1

You should not style canvas directly with dimensions. Set the canvas attribute width and height, without exceeding the screen dimensions:

<canvas width="500" height="400" ></canvas>

When exporting to image use

canvas.toDataURL({multiplier: 4});

This will give you a canvas 4 times bigger the one on the screen.

Styling the canvas with the style to reduce its diemension and having a bigger image with dataURL will make the overall experience worse.

The style squeeze the canvas to your eyes with something that fabricjs is not ready to understand. So you will not get normal sized controls.

//remove those
width:400px !important;
height:600px !important;

http://jsfiddle.net/Q3TMA/1043/