+ 5

How can I resize HTML canvas without losing content ☹

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!

13th Jan 2022, 11:34 AM
Mohammed Nihal
Mohammed Nihal - avatar
6 Answers
+ 2
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; })
14th Jan 2022, 8:17 PM
anand Pandit
anand Pandit - avatar
+ 4
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.
13th Jan 2022, 4:57 PM
Elon - avatar
+ 3
After resize of canvas you have to repeat the draw.
13th Jan 2022, 11:43 AM
JaScript - avatar
+ 3
Mohammed Nihal in drawing app you could implement a state and save that.
13th Jan 2022, 11:52 AM
JaScript - avatar
+ 3
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.
13th Jan 2022, 5:04 PM
JaScript - avatar