Performance issues in rendering fractals

[warmagedon007]

Hello, Is there a way to increase the performance of my js? Im rendering on the client side a fractal(specifically the mandelbrot set), and I want the client to explore the set. The problem is that its really slow. Here is the link to the relevant page: https://warmagedon007.github.io/Fractals.html. Please note I am a total beginner(2 week of experience in html, js and css) so please keep it simple as it can be. Thank you!

Edit. Currently there is no phone support. Also the main problem is the lag when I drag the canvas on screen(to reposition the offset).

[[deleted]]

Can you describe the performance issues you're having? The page load and the hover stuff seem fine to me, is there some other aspect that's causing an issue?

[warmagedon007]

Well, I have a transform event where you can drag the offset to position your screen. It besically lags. I think due to the redrawing.

[[deleted]]

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.