O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required