Saving a canvas drawing larger than the physical screen

Question

I'm dynamically drawing a floorplan through canvas which you can scroll through up/down left/right but I would like to save the whole image of the floorplan for other uses. I know I can scale the floorplan down and capture the image but I need it to be in a higher resolution than the actual screen I'm capturing it on.

I'm currently using FileSaver.js to save the canvas as a bitmap because it's super easy.

A little illustration of what I'm thinking

Is this possible?

Have you tried canvas.toDataURL? If so, can you articulate why this is unsuitable? — enhzflep, Jul 30 '13 at 11:41
Here's an instruction on how to export canvas as an image http://stackoverflow.com/a/3514404/2633952 — yonathaniel, Jul 30 '13 at 12:12

score 2 · Accepted Answer · answered Jul 30 '13 at 11:30

2

It's hard to tell without more information, but you can create a larger canvas (of the size you need it to be) and let it hidden. Then when you want to capture, you re-draw everything into that canvas and save your picture from it instead of the one that is displayed.

answered Jul 30 '13 at 11:30

Virus721

8,061
12
67
123

Thanks! I set the larger size in CSS initially and that just distorted the whole image. I set the size of canvas throug JavaScript now and it works, so thank you for pointing me in the right direction. – Franci Jul 30 '13 at 12:08

score 1 · Answer 2 · answered Jul 30 '13 at 12:07

So you don't need to save the canvas, but the image.
I don't know your FileSaver.js, but if it cannot save an image directly, putting the image inside a new canvas is easy :

 function getCanvasFromImage(img) {
    var cv = document.createElement('canvas');
    cv.width = img.width;   cv.height = img.height;
    cv.getContext('2d').putImage(img, 0, 0);
    return cv;
 }

Saving a canvas drawing larger than the physical screen

2 Answers2