Rendering to HTML canvas in recursive calls

I have implemented a recursive maze generation algorithm in Javascript, and am rendering using HTML canvas.

The problem I have, is that I am unable to render to the canvas while the recursive function is in progress. The render only appears after recursive calls have finished.

Here is my (rough) functioning recursive function :

    function start(canvas_context)
{
    //do some stuff here...
    render(canvas_context);
    if()...{

        start(canvas_context);
    }
    else if(...)
    {
        if(...)
        {
            start(canvas_context);
        }
    }
}

Here is my rendering function:

    function render(canvas_context)
{
    canvas_context.fillStyle = 'black';
    canvas_context.fillRect(0,0,canvas.width, canvas.height);
    for(..)
    {
        for(...)
        {
            canvas_context.strokeStyle = 'red';
            canvas_context.beginPath();
            canvas_context.moveTo(start.x, start.y);
            canvas_context.lineTo(end.x,end.y);
            canvas_context.stroke();
        }
    }
}

Here are the full functions if they are needed:

    function start(canvas_context)
{
    //Vector2.print(game_config["current_grid_pos"]);
    var current_block = game_config["grid_space"][game_config["current_grid_pos"].y][game_config["current_grid_pos"].x];
    var random_neighbor_grid_pos = random_neighbor(current_block);
    //render(canvas_context);
    if(random_neighbor_grid_pos.x != -1 && random_neighbor_grid_pos.y != -1)
    {
        var next_block = game_config["grid_space"][random_neighbor_grid_pos.y][random_neighbor_grid_pos.x];
        next_block.visited = true;
        game_config["visited_stack"].push(random_neighbor_grid_pos);
        remove_walls(current_block, next_block);
        game_config["current_grid_pos"] = random_neighbor_grid_pos;
        start(canvas_context);
    }
    else if (game_config["visited_stack"].length > 0)
    {
        current_block.visited = true;
        game_config["visited_stack"].pop();
        if(game_config["visited_stack"].length != 0)
        {
            game_config["current_grid_pos"] = game_config["visited_stack"][game_config["visited_stack"].length - 1];
            start(canvas_context);
        }
    }
}


    function render(canvas_context)
{
    //Initialise the canvas background.
    canvas_context.fillStyle = 'black';
    canvas_context.fillRect(0,0,canvas.width, canvas.height);
    for(var y = 0; y < game_config["grid_space"].length; y++)
    {
        for(var x = 0; x < game_config["grid_space"][0].length; x++)
        {
            var block = game_config["grid_space"][y][x];
            var walls = block.get_walls();
            for(var key in walls)
            {
                var wall = walls[key];
                render_line(canvas_context, wall.start, wall.end);
            }
        }

    }
}

    function render_line(canvas_context, start, end)
{
    canvas_context.strokeStyle = 'red';
    canvas_context.beginPath();
    canvas_context.moveTo(start.x, start.y);
    canvas_context.lineTo(end.x,end.y);
    canvas_context.stroke();

}

Is it even possible to render during recursive calls with HTML canvas?

4 thoughts on “Rendering to HTML canvas in recursive calls”

Leave a Comment