How to save an image in its original size in a canvas after scaled the canvas

Question

I have a canvas used to photo editing. I want to save the photos in Full HD. Canvas size is well below this resolution for viewing on small screen. So I apply a scaling on canvas to see the whole picture.

How can I save after editing, the image visible in the canvas in Full HD?

Example: Edit an image size QHD (2560x1440) in a canvas size SVGA (800x600) and produce a picture Full HD (1920x1080)

Answer 1

The size you set with the width and height properties will be the image's final size.

canvas.width = 1920;              // actual size given with integer values
canvas.height = 1080;

If you need to scale down while on screen you need to use CSS (one of those special cases):

canvas.style.width = '960px';     // show at 50% on screen
canvas.style.height = '540px';

Alternatively have your actual image as an off-screen canvas and copy regions from that to the on-screen canvas depending on scale etc.

If you edit your image at a lower than the actual resolution then the point of HD etc. is gone as you need to scale up a lower resolution image to a bigger one which will make it appear more blurry due to the introduced interpolation. Always work at the actual target resolution when working with digital images (or video).

Then use toDataURL() to get the image:

var dataUri = canvas.toDataURL(); // saves a PNG at 1920x1080

for JPEG:

var dataUri = canvas.toDataURL('image/jpeg', 0.8);  // last = quality

Just be aware of that your mouse positions will have to be scaled the opposite way as they are relative to the canvas element and not its bitmap.