Canvas updating with computation

by sujit km

HTML

<canvas id="canvas" width="150" height="150"></canvas>

JavaScript

function calculateStuff(progressCallback) {
    var x = 0, y = 0;
   // var total = N[0]*N[1];

    // Solution #3: Schedule repeated calls using setInterval
    // var intervalID = window.setInterval(progressCallback, 0, //N[0]*y/total);

    for (y = 0; y < 2; y++) {
        for (x = 0; x < 2; x++) {
alert('x,y:' + x +','+y);
progressCallback((y+x)/2);
            // Do computationally-intensive stuff here
        }
//      Solution #1 - Just directly call the progress bar updater //during the loop
progressCallback((y+x)/2);
//      Solution #2 - Schedule a progress bar update using //setTimeout
//      window.setTimeout(progressCallback, 0, N[0]*y/total);
    }

//  Solution #1:
//  progressCallback(N[0]*y/total);
//  Solution #3:
//  window.clearInterval(intervalID)
    return resultOfComputation;
}

function setProgress(f) {
//  Input: f - float between 0 and 1 indicating progress
//  Setting off an alert allow me to see that this function does //in fact update the progress bar.
//  alert("Progress!");
    progressCtx.clearRect(0, 0, progressCanvas.width, progressCanvas.height);
    progressCtx.fillStyle = "blue";
    progressCtx.fillRect(0, 0, progressCanvas.width * f, progressCanvas.height);
}
var progressCanvas = document.getElementById("canvas");
      if (progressCanvas.getContext) 
        var progressCtx = progressCanvas.getContext("2d");
var result = calculateStuff(setProgress);