Test purpose
- Create a resizable <canvas> element
- Create animated Oval and Phrase entitys to display in the canvas
- Create hook functions for the Phrase that will be invoked as the user enables and disables 'prefers-color-scheme' and 'prefers-reduced-motion' in the Browser's Inspector (Chrome)
- When 'prefers-color-scheme' is set to 'light' (default) the background should be light gray and the text dark green
- When 'prefers-color-scheme' is set to 'dark' the background should be dark gray and the text light green
- When 'prefers-reduced-motion' is set to 'reduced' the animation should stop; resizing the <canvas> element should lead to distortions in the scene
- When 'prefers-reduced-motion' is unset the animation should start; resizing the <canvas> element should lead to the scene remaining centred in the canvas with no distortion as the resize continues.
- When reloading the page, the scene should respect the last choices made in the browser's Inspector; in particular, if 'prefers-reduced-motion' has been set to 'reduced' the animation should play for five seconds, then stop automatically.
To toggle user preferences in Chrome: open the Inspector, press Ctrl/Cmd+Shift+P, type 'show rendering', click on the 'Show rendering' button.
This demo also includes HTML/CSS code for action to take when Javascript has been disabled on a page. Specifically, a background image will be displayed in the canvas (via CSS) unless a <script> tag in the HTML immediately following the <canvas> element runs - the code removes a class from the canvas element, which prevents the background image displaying. Test this by disabling Javascript in the browser and then reloading the demo.
Annotated code