Tutorial by Examples

Starter code to create and remove a full page canvas that responds to resize events via javascript. var canvas; // Global canvas reference var ctx; // Global 2D context reference // Creates a canvas function createCanvas () { const canvas = document.createElement(&q...

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 tha...

The window resize events 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...