Monday, January 18, 2010

HTML5 canvas element

Arturo asked me to implement a simple program that can draw a Mandelbrot set. The first idea was to implement it using the good old way - java, yet there is nothing "innovative" for me. Working with 2D graphics in Java is a really simple task. Then I thought that may be Processing is a way to go. Nah. Processing is just a simplified java syntax. Finally I decided to reimplement it (I actually found an implementation in the internet of a simple draw algorithm in "C") using JavaScript and a new HTML5's element canvas. I had never used this element before, and I was surprised how easily it can be used. So here it is. After you press "draw" button, it will take about 1 minute to draw a Mandelbrot set inside the rectangle area (you should use a HTML5 compliant browser like Firefox or Opera).







You can check the source code here.

So, actually to do a 2D graphics, all you need is a browser! No compilers or IDEs. Just a browser!.

The "canvas" element is a new feature of an HTML standard that allows to draw a 2D graphics using just JavaScript. Another interesting feature of the standard is a "video" element that allows to include video content on any HTML page without using external players like Flash or Silverlight.
Isn't it amazing?

1 comment:

Garrett Strobel said...

Thank you Anton. Now make it able to zoom!