jquery - Show drawing process using JavaScript and HTML5 canvas -

i trying make little pythagoras tree application using javascript/jquery , html5 canvas.

the algorithm works fine sadly not able see process of drawing. ui freezes , shows whole drawing after having finished.

current behaviour: http://www.kappelcation.com/index.php?contentid=4 behaviour have: http://www.jjam.de/java/applets/fraktale/pythagoras_baum.html (you need allow java-applet , click few times see progress of drawing).

$(document).ready(function(){ //just listeners , initialization initcanvas();  $(autormanselect).change(function(){     if(($(this).val()==1)) //changed manual automatic     {         $(pythagorascanvas).click();     } }); $(startbutton).click(function(event){     $(this).unbind(event);     $(this).html('add leaves');     $(restartbutton).css("visibility", "visible");     starttree();     $(this).click(function(){         var next = parseint($(depthinput).val())+1;         $(depthinput).val(next);         $(pythagorascanvas).click();     }); }); $(restartbutton).click(function(){     starttree(); }); });  function initcanvas() //adjust size, clear canvas , draw boarder { var canvas = document.getelementbyid("pythagorascanvas"); canvas.height=600; canvas.width=$(maindiv).width()-40; $(pythagorascanvas).unbind("click"); if (canvas.getcontext)  {     var context = canvas.getcontext("2d");     //clear canvas     drawrectangle(context, new point(0,canvas.height), new point(canvas.width,canvas.height), new point(canvas.width,0), new point(0,0), "#ffffff");     //draw border canvas     drawrectangle(context,new point(0,canvas.height),new point(canvas.width,canvas.height), new point(canvas.width, 0),new point(0,0), '#000000', true); } }  function starttree() //start drawing process {    initcanvas(); var canvas = document.getelementbyid("pythagorascanvas"); if (canvas.getcontext)  {     var context = canvas.getcontext("2d");     var rectlength = parseint($(firstsquareinput).val());     var startwidth = canvas.width/2-rectlength/2;     var startheight = canvas.height-canvas.height/4;     var starta = new point(startwidth, startheight);     var startb = new point(startwidth+rectlength, startheight);          drawbranch(context, starta, startb, 0);  } }  function point(x, y) { this.x = x; this.y = y; }  function drawbranch(context, a, b, depth) //gets called recursively  { var maxdepth = $(depthinput).val(); if(depth<maxdepth) {     depth++;     //calculate positions of current rectangle     var dx = b.x - a.x;     var dy = a.y - b.y;     var c = new point(b.x-dy, b.y-dx);     var d = new point(a.x-dy, a.y-dx);     //draw current rectangle     drawrectangle(context, a, b, c, d);      //calculate new position     var offsetx;     if($(triangleoffsetinput).val().tolowercase()=="random")     {         offsetx = math.random();     }     else     {         offsetx = parsefloat($(triangleoffsetinput).val())/100; //first offset in x-direction (in relation square length of 1)     }     var offsety = -math.sqrt(math.pow(0.5,2)-math.pow((0.5-offsetx),2)); //pythagoras offset in y (negative sign necessary because y-values smaller upwards)     var e = new point( d.x + offsetx*(c.x-d.x) + offsety*(a.y-b.y), d.y + offsetx*(c.y-d.y) + offsety*(b.x-a.x));      if($(filltrianglebox).prop("checked"))     {         drawtriangle(context, c, d, e);     }         var autorman = $(autormanselect).val();     if(autorman==1)     {         //draw new positions         drawbranch(context, d, e, depth);         drawbranch(context, e ,c, depth);            }     else     {         $(pythagorascanvas).click(function(event)          {             $(this).unbind(event);             drawbranch(context, d, e, depth);             drawbranch(context, e ,c, depth);                });     } } else {     $(pythagorascanvas).click(function(event)      {         $(this).unbind(event);         drawbranch(context, a, b, depth);     }); }    }  function drawtriangle(context, c, d, e, color) { if(typeof(color)==='undefined') {     color='#'+$(trianglecolorinput).val(); }  context.strokestyle = color; context.beginpath(); context.moveto(c.x, c.y); context.lineto(d.x, d.y); context.lineto(e.x, e.y); context.closepath(); context.fillstyle = color; context.fill(); context.stroke(); }  function drawrectangle(context, a, b, c, d, color, ignorefill) { if(typeof(color)==='undefined') {     color='#'+$(rectcolorinput).val(); }  if(typeof(ignorefill)==='undefined') {     ignorefill=false; } context.strokestyle = color; context.beginpath(); context.moveto(a.x, a.y); context.lineto(b.x, b.y) context.lineto(c.x, c.y); context.lineto(d.x, d.y); context.closepath(); if($(fillrectbox).prop("checked") && !ignorefill) {     context.fillstyle = color;     context.fill(); } context.stroke(); } 

i have tried use settimeout() function make drawing process asynchronous achieve desired behaviour either failed horribly @ implementing or settimeout() not in situation.

i hope can give me hint. in advance!

i think following (untested) modification drawbranch function using settimeout should work

if(autorman==1) {     //draw new positions     settimeout(function() {         drawbranch(context, d, e, depth);         drawbranch(context, e ,c, depth);            }, 0); } else {     $(pythagorascanvas).click(function(event)      {         $(this).unbind(event);         drawbranch(context, d, e, depth);         drawbranch(context, e ,c, depth);          }); }