I have a HTML canvas element which is resized when the user resizes the screen.
canvas.height = pageHeight(); canvas.width = pageWidth();
The actual resizing works fine, but it blanks the canvas.
I would like to keep the contents. Is there another method of changing the size of a canvas element, or is there a way to store the contents and then draw them back to the canvas?
You need to either resize the canvas with CSS or redraw the canvas after you resize it.
If you want to save the content of the canvas and redraw it, I can think of a few options:
context.getImageDatato grab the whole canvas, resize the canvas, then use
context.putImageDatato redraw it at the new scale.
Imageobject, setting the source to the result of
canvas.toDataUrl(), resize the canvas, then draw the image at the new scale.
context.setScale(xscale, yscale)and call whatever function you used to draw the canvas originally. Assuming you set up
yscalecorrectly, it will automatically scale everything to the new size.
context.drawImage(oldCanvas, ...)to copy the old canvas onto the new one. Then you would switch out the old canvas with the new one.
The first two options won't work if you have drawn an image from a different domain to the canvas at any time, and aren't supported by older implementations.
In my opinion, option 3 (redrawing the image at the new scale) is the best if it's possible. It's the only option that will keep your lines completely smooth and sharp, and it will always work (assuming you still have all the information to generate the image).
©2020 All rights reserved.