refactor(examples): restructure/refactor/simplify canvas-recorder example

[postspectacular]

• re-order functions & initialization process
• consolidate global vars into State (now defined inside init())
• update grid to store pre-defined text elements (avoiding multiple arrays and re-allocations each frame)
• use vector algebra for computing various state values
• add global RND to allow switching to deterministic behavior
• use thi.ng/adapt-dpi to simplify HDPI canvas resizing
• update naming & exports convention for constants
• simplify sentences/symbols defs/handling (avoiding slicing)
• extrace start/stop recording functions
• update UI button logic, update init() to stop any active recording
• add more doc strings / comments
• update pkg deps & meta
• move screenshot to /assets/examples

cc @nclslbrn

[postspectacular]

@nclslbrn Forgot to mention: I also updated the mime type for the canvas recorder (link), since the current default isn't supported by Firefox (only Chrome). Safari does only seem to support video/mp4;codecs="AVC1.4d002a,mp4a.40.1" but none of the WebM containers/codecs (so recording won't currently work there). Will add some detection function to the thi.ng/dl-asset package and then update this example later...

[nclslbrn]

@postspectacular thanks, that's a huge refactoring, especially to put all the grid variations in state. I tried to put the UI (buttons) and canvas in the same render/compute function but without success, I'm glad I know how to do it now.

I had seen this Codec problem but I didn't know if it was a choice to use a particular Codec (for better rendering) or a bug.