Canvas Responsive Design
Creating a responsive full page canvas
Mouse coordinates after resizing (or scrolling)
Canvas apps often rely heavily on user interaction with the mouse, but when the window is resized, the mouse event coordinates that canvas relies on are likely changed because resizing causes the canvas to be offset in a different position relative to the window. Thus, responsive design requires that the canvas offset position be recalculated when the window is resized -- and also recalculated when the window is scrolled.
This code listens for window resizing events and recalculates the offsets used in mouse event handlers:
Responsive canvas animations without resizing events
The window resizes events that can fire in response to the movement of the user's input device. When you resize a canvas it is automatically cleared and you are forced to re-render the content. For animations, you do this every frame via the main loop function called by requestAnimationFrame which does its best to keep the rendering in sync with the display hardware.
The problem with the resize event is that when the mouse is used to resize the window the events can be trigger many times quicker than the standard 60fps rate of the browser. When the resize event exits the canvas back buffer is presented to the DOM out of sync with the display device, which can cause shearing and other negative
effects. There is also a lot of needless memory allocation and release that can further impact the animation when GC cleans up some time afterward.
Debounced resize event
A common way to deal with the high firing rates of the resize event is to debounce the resize event.
The above example delays the resizing of the canvas until 100ms after the resize event. If in that time further resize events are triggered the existing resize timeout is canceled and a new one scheduled. This effectively consumes most of the resize events.
It still has some problems, the most notable is the delay between resizing and seeing the resized canvas. Reducing the debounce time improves this but the resize is still out of sync with the display device. You also still have the animation main loop rendering to an ill-fitting canvas.
More code can reduce the problems! More code also creates its own new problems.
Simple and the best resize.
Having tried many different ways to smooth out the resizing of the canvas, from the absurdly complex, to just ignoring the problem (who cares anyway?) I fell back to a trusty friend.
K.I.S.S. is something most programmers should be aware of ((Keep It Simple Stupid) The stupid refers to me for not having thought of it years ago. ) and it turns out the best solution is the simplest of all. Just resize the canvas from within the main animation loop. It stays in sync with the display device, there is no needless rendering, and the resource management is at the minimum possible while maintaining the full frame rate. Nor do you need to add a resize event to the window or any additional resize functions. You add the resize where you would normally clear the canvas by checking if the canvas size matches the window size. If not resize it.
ATutorialHub Related Guide
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website