Jim's random circles javascript demo
Move the mouse around ...
features
canvas tag for drawing- resizing canvas based on window size
- updating a
message tag from mouse movement
- drawing many random circles (with some transparency)
- drawing more circles as mouse moves ... but not too quickly - wait at least a given delay time between new circles.
notes
- Writing js apps always takes me a long time ... lots of looking things up and building off examples. Way too many properties and methods to keep in my head.
- When doing client-side js, you need to make sure that any javascript which manipulates the tags in your webpage runs after those tags have been interpreted by the browser ... that means not in the
head, but after the body loads.
- After the first "set things up" function, everything else should happen through "event handlers" ... mouse clicks, text changes, AJAX data arriving, timeouts, ...
- Timing (including animations) are done by things like setTimeout events ... google "javascript animation" for examples.
async, await, promise ...
Modern js has a more powerful and general way
of handling timeouts, allowing for multiple
threads of things waiting to run at different times ... all of which is new enough that I haven't used it much.
See for example MDN: using promises .
