October 30, 2010 by

Mandelbrot Set in HTML5 Canvas

As you might know, Benoît Mandelbrot sadly passed away two weeks ago. A great mathematician, he almost single-handedly created a new aspect to mathematics, fractal geometry. Having worked with fractals (using the open-source Apophysis) for several years, I felt I owed something to the man, so I thought I’d make a Mandelbrot set using the canvas tag.


You could ask me what exactly the Mandelbrot set is, and I could probably give you an explanation that might satisfy a ten-year-old (“Unicorns!”). However, you’d be far better off reading the Wikipedia article about it. While it’s awful to not know precisely what it is that your code does, in the case of fairly heavy maths like this, I’m going to let myself off. I’m no mathematician.

Mandelbrot Set

Click the box once to compute the set. Click again to zoom. Computing time will vary between browsers and computers. May lock up your browser for a few seconds.


Your browser doesn’t support canvas! Try using a recent version of Safari, Firefox, Opera or Chrome instead. Sorry!


Clouds are not spheres, mountains are not cones, coastlines are not circles, and bark is not smooth, nor does lightning travel in a straight line. – Benoît Mandelbrot (20 November 1924 – 14 October 2010)

About the Author

Carl Lange

I'm currently a Computer Games Development student at Carlow IT. I love programming and all things technical, and I'll learn anything if it's interesting. I'm passionate about technical education, and naturally about games. Check out my resume, and follow me on Twitter!

Visit Website

One Comment

Trackbacks for this post

  1. Tweets that mention HTML5 canvas Mandelbrot set | Flax Project -- Topsy.com says:
    October 30, 2010 at 3:59 pm

    […] This post was mentioned on Twitter by Dr Carl Lange and Flax.ie, Dr Carl Lange. Dr Carl Lange said: Alright. I finally published that Mandelbrot set using canvas. Enjoy. http://flax.ie/mandelbrot-set-in-html5-canvas/ […]