Time for action – creating a Mandelbrot application

Let's start off by creating a new application with mandelbrot.html, mandelbrot.css, and mandelbrot.js files. We also include mandelbrotGenerator.js we created previously for the application. You can find the code for this section in Chapter 9/example9.2.

In the HTML file we add a <canvas> element to the HTML to draw the Mandelbrot on and set the size to 640 by 480:

<canvas width="640" height="480"></canvas>

We also add three buttons with pre-set Mandelbrot bounds defined as arrays in JSON format in the data-settings custom data attribute:

<button class="draw"
    data-settings="[-2, -2, 2, 2]">Draw Full</button>
<button class="draw"
    data-settings="[-0.225, -0.816, -0.197, -0.788]">Preset 1
</button>
<button class="draw"
    data-settings="[-1.18788, -0.304, -1.18728, -0.302]">Preset 2
</button&gt...