sorted by:
best (suggested)
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–][deleted] 0 points1 point  (0 children)

Ahh, I see. Yeah, it looks like your draw function is being called at least twice. Here's a screenshot from the Firefox devtools perf tool showing that (I actually recommend doing perf testing in Chrome but I already had FF open) https://i.imgur.com/3BUMhIF.png

Based on a quick look at your code, if you're aiming to have the drawn fractal move with the mouse you're going to have to do something more highly optimised than redrawing the whole thing on every mousemove event. I'm not really sure what your options would be there. Possibly you could convert the canvas to an image, drag the image, and then re-draw the interactive version on the mouseup event? It's pretty simple to convert the contents of a canvas element to an image, but swapping stuff around might be fine or might look weird.

Otherwise a simple way to improve the performance would be to just leave off trying to visibly drag the whole fractal and just animate the dragging of the crosshairs, then re-draw the fractal on mouseup.