CODEWITHSUNDEEP
javascripthtmlcanvasgraphics
Trey Taylor
Trey Taylor

Reputation: 103

Updating HTML Canvas?

So I'm working on a little project that involves drawing a new circle to an HTML canvas every second. The problem I'm having is that I don't think it is clearing the screen every time I call the run function again:

var canvas = document.getElementById("evolutionCanvas");
var randAge = Math.floor((Math.random() * 35) + 1);
var i = new Organism();
var radius = 75;

function change()
{
   document.getElementById("test").innerHTML = "this was pressed";
}

function Organism(env, age, food, preds)
{
    this.environment = env;
    this.age = age;
    this.food = food;
    this.preds = preds;
    this.detSurvivability = function(food, preds, age, env)
    {
        var foodLevel = (food/preds) * (Math.sqrt(food + preds));
        var foodx = (foodLevel) / (foodLevel - 1);
        return ((this.environment + this.age) / 2) * foodx;
    }
}
function update()
{
    var randEnv = Math.floor((Math.random() * 10) + 1);
    var randFood = Math.floor((Math.random() * 75) + 1);
    var randPreds = Math.floor((Math.random() * 100) + 1);
    return i.detSurvivability(randFood, randPreds, randAge, randEnv);
}

function run(su) 
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    if (su > 0)
    {
        radius = radius + 8;
        ctx.beginPath();
        ctx.arc(150, 150, radius, 0, 2*Math.PI);
        ctx.stroke();
    }
    else
    {
        radius = radius - 5;
        if (radius > 0)
        {
            ctx.beginPath();
            ctx.arc(150, 150, radius, 0, 2*Math.PI);
            ctx.stroke();
        }
    }
    setInterval(run(update()), 1000);
}

run(update());

Here's the HTML:

<!DOCTYPE html>
<html>
<body>

    <canvas id="myCanvas" width="500" height="500" style="border:1px solid      #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    <script type="text/javascript" src="evolution.js"></script>
</body>
</html>

What's the best way I should be clearing the canvas after each update rather than printing all of the circles at once?

Upvotes: 0

Views: 796

Answers (1)

Suman Bogati
Suman Bogati

Reputation: 6349

Invoke the run function with setInterval something like 

 setInterval(function (){
    run(update());
 }, 1000);

The way you have written run with setInterval(run(update()), 1000); }, is executed immiediately instead of interval of one second. 

var canvas = document.getElementById("evolutionCanvas");
var randAge = Math.floor((Math.random() * 35) + 1);
var i = new Organism();
var radius = 75;

function change()
{
   document.getElementById("test").innerHTML = "this was pressed";
}

function Organism(env, age, food, preds)
{
    this.environment = env;
    this.age = age;
    this.food = food;
    this.preds = preds;
    this.detSurvivability = function(food, preds, age, env)
    {
        var foodLevel = (food/preds) * (Math.sqrt(food + preds));
        var foodx = (foodLevel) / (foodLevel - 1);
        return ((this.environment + this.age) / 2) * foodx;
    }
}
function update()
{
    var randEnv = Math.floor((Math.random() * 10) + 1);
    var randFood = Math.floor((Math.random() * 75) + 1);
    var randPreds = Math.floor((Math.random() * 100) + 1);
    return i.detSurvivability(randFood, randPreds, randAge, randEnv);
}

function run(su) 
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    if (su > 0)
    {
        radius = radius + 8;
        ctx.beginPath();
        ctx.arc(150, 150, radius, 0, 2*Math.PI);
        ctx.stroke();
    }
    else
    {
        radius = radius - 5;
        if (radius > 0)
        {
            ctx.beginPath();
            ctx.arc(150, 150, radius, 0, 2*Math.PI);
            ctx.stroke();
        }
    }
    setInterval(function (){
		run(update());
	}, 1000);
}

run(update());
<canvas id="myCanvas" width="500" height="500" style="border:1px solid      #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

Upvotes: 1

Related Questions