Simple example of a canvas animation with a play/pause button

Most of the posted examples are more advanced than this…

Can anyone point to a good idiomatic way to do this?

It can probably be made a bit simpler than this, but here’s a quick example of an animating canvas with a pause button:

https://beta.observablehq.com/@jashkenas/simple-canvas-animation-with-pause

It uses this, which is the previous value of the cell (in this case, the canvas), to keep the position of the circle the same even if the code has been re-evaluated. For more, see: https://beta.observablehq.com/@tmcw/untitled/5

2 Likes

Perfect - thank you!