CODEWITHSUNDEEP
htmlcanvas
Sergei Basharov
Sergei Basharov

Reputation: 53850

Save Canvas as PNG for print

I know I can save a canvas to PNG file easily with modern browsers. As it's a standard way for a browser to save canvas graphics as PNG, JPEG or BMP, I suppose it should work really good. I wonder how I'd save some canvas graphics to print it later? I mean if I use standard methods, I will get the image that is the same in size as source canvas and with a low-res 72 dpi or something like that. Should I make the canvas larger, then save a large image, and then convert it to 300dpi for print? Did anybody of you try to use it for print? I know I can use some pdf generator library but want to try standard ways first.

Upvotes: 2

Views: 3064

Answers (1)

a paid nerd
a paid nerd

Reputation: 31512

Yes, make the canvas larger and save a large image.

HTML5 canvases have no sense of DPI — one pixel on the canvas equals one pixel on your screen. The quality of the print depends on what you're printing (aliased vs anti-aliased graphics) and type of printer (ink jet, laser).

If you wanted 300 DPI exactly, use something like a screen ruler and measure the DPI of your monitor (say, 72 DPI), divide 300 by that (equalling, say, 4.1) and make the canvas that many times bigger.

Alternatively you could think about using SVG and drawing graphics with vectors. Then you'd effectively have infinite DPI. (Think of Adobe Illustrator vs. Photoshop.)

Upvotes: 4

Related Questions