on scaling canvas, toDataURL only returns visible part of canvas, not the part out of canvas size

Question

I am trying to freehand draw on image within canvas, along with zoom in/out.

to add drawing change on image I am using getImageData() & putImageData() and then saving the image using canvas.nativeElement.toDataURL();

it works fine without zoom, but when i zoom in using context.scale(x,x); canvas.nativeElement.toDataURL(); saves only image that is visible in canvas area, and the image part that went out of canvas size after zooming was lost.

I want to get complete image with drawing changes, when zoomed out, is there any alternative for toDataURL() which can give me complete image data.

Answer 1

You may paint your image on the screen canvas and also on a buffer canvas (not attached to the DOM) The buffer canvas may be as big as the scaled image, and you can use toDataURL() on the buffer canvas