How can I resize HTML canvas without losing content ☹

Question

I want to resize canvas in html while window is resized. I used

canvas.height=window.innerHeight;
canvas.width=window.innerWidth;

It worked great but canvas was blank. Is there anyway to resize canvas without losing content 🤔please anyone help!

Answer 1

Mohammed Nihal this will help you
Go to js file
And create a listener on window
window.addEventListener(" resize", function (){
let canvas = document.getElementById(" #canvas");
canvas.style.width = window.innerWidth;

canvas.style.height = window.innerHeight;
})

Answer 2

Resize it using CSS

every time you resize with canvas.width, canvas.height the canvas is fully cleared.

if you're building a drawing app you have probably defined a function to redraw the canvas every time a change is applied so use the same function to redraw the canvas after it changed.

if you have not defined such function, do it.

Answer 3

After resize of canvas you have to repeat the draw.

Answer 4

Mohammed Nihal in drawing app you could implement a state and save that.

Answer 5

https://stackoverflow.com/questions/3543358/resizing-a-html-canvas-blanks-its-contents

Answer 6

Mohammed Nihal ,
The questioning is in the dark all the time. Please save your code on SL Playground provide us the link here. After that we could really help.