HTML5 Web Application Development By Example Beginner's guide

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> ...