Currently we're running the chart generation function on every update. Although the only browser that seems to struggle with this is Firefox, it is extremely inefficient to regenerate the entire canvas many times per second, such as when dragging an item around.
The ideal way to handle interaction is to use two canvases: a background canvas that holds the chart, and a transparent foreground canvas that is the exact same size and positioned on top of the background one. If the user is dragging around an item, it is drawn on the foreground canvas, and the background canvas with all the albums does not need to be redrawn. When the user drops the item in a slot, the background canvas is redrawn only once.
camdendotlol
commented
2 months ago
Currently we're running the chart generation function on every update. Although the only browser that seems to struggle with this is Firefox, it is extremely inefficient to regenerate the entire canvas many times per second, such as when dragging an item around.
The ideal way to handle interaction is to use two canvases: a background canvas that holds the chart, and a transparent foreground canvas that is the exact same size and positioned on top of the background one. If the user is dragging around an item, it is drawn on the foreground canvas, and the background canvas with all the albums does not need to be redrawn. When the user drops the item in a slot, the background canvas is redrawn only once.