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.getImageData
to grab the whole canvas, resize the canvas, then use context.putImageData
to redraw it at the new scale.Image
object, 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 xscale
and yscale
correctly, 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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With