HTML canvas - drawing disappear on resizing

Question

I have created a basic shape in HTML canvas element which works fine.

The problem occurs when I resize the canvas, all the drawing in the canvas disappears. Is this

Answer 1

One another way is to use the debounce if you are concerned with the performance. It doesnt resize or redraw every position you are dragging. But it will resize only when the it is resized.

 // Assume canvas is in scope
 addEventListener.("resize", debouncedResize );

 // debounce timeout handle
 var debounceTimeoutHandle;

 // The debounce time in ms (1/1000th second)
 const DEBOUNCE_TIME = 100; 

 // Resize function 
 function debouncedResize () { 
    clearTimeout(debounceTimeoutHandle);  // Clears any pending debounce events

 // Schedule a canvas resize 
 debounceTimeoutHandle = setTimeout(resizeCanvas, DEBOUNCE_TIME);
 }

 // canvas resize function
 function resizeCanvas () { ... resize and redraw ... }