Introduce layers
In order to optimize animation, introduce layers.
Every ClockElement
is assigned to a layer. Layers are ordered, have a bounding box and a position. They are not hierarchical. When drawing the clock, iterate the layers from the bottom, drawing each one. To draw a layer, traverse the clock elements as usual, setting up the context for each one, but skipping the actual drawing if the element does not belong to that layer. This ensures consistent sizing, rotation, etc for elements on the same clock face but not in the same layer.
Layers are always drawn into an offscreen image or canvas, then copied onto the main canvas.
Static layers never change. They are drawn once, then never more.
Dynamic layers do change but different layers can change at different rates. For example, an animation of a pendulum probably updates at 30Hz or more, whereas the clock hands only update at 1Hz. These should be in separate dynamic layers, but the clock hand one updated only once per second.
So maybe layers are connected to different drivers, that update them at different rates?