Question

I would like some help on making shapes randomly appear on my canvas and staying in the position they appear. Currently i have a button which when pressed three shapes appear, but I would like these three shapes to appear continously around the canvas until the button is pressed again.

HTML:

<canvas id="example1" width="800" height="600">
    <p class="canvas-no-support">Your Browser Does Not Support HTML5 canvas!</p>
</canvas>

<button onclick="start()">Go!!</button>

Script:

function start() {
    setInterval(draw, 100);
}

function draw() {
    // get the canvas element using the DOM
    var canvas = document.getElementById('example1');

    // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext) {

        var context = canvas.getContext('2d');

        //Red Square

        function dSqu() {
            context.strokeStyle = "rgb(255,215,0)"; //Yellow Outline
            context.fillStyle = "rgb(200,0,0)";
            context.lineWidth = 4; //Stroke Thickness
            context.fillRect(75, 75, 137, 137);
            context.strokeRect(75, 75, 137, 137); //Outline
        }

        function dCir() {
            //Purple Circle
            context.beginPath();
            context.arc(380, 137, 100, 0, Math.PI * 2, true);
            context.fillStyle = "rgb(200,80,200)";
            context.fill();
            context.lineWidth = 4; //Stroke Thickness
            context.strokeStyle = "rgb(255,215,0)";
            context.stroke();
        }

        function dTri() {
            //Green Triangle
            context.beginPath();
            context.fillStyle = "rgb(0,200,0)";
            context.moveTo(100, 100);
            context.lineTo(300, 100);
            context.lineTo(200, 200);
            context.lineTo(100, 100);
            context.fill();
            context.strokeStyle = "rgb(255,215,0)";
            context.stroke();
            ctx.closePath();
        }

        dSqu();
        dCir();
        dTri();

    } else {
        document.write('Your Browser does not support HTML5 Canvas.');
    }
}​

Answer 1

Use setInterval to make a repeating operation and Math.random() to get a random number.

For example :

var functions = [dSqu, dCir, dTri];
setInterval(function(){
   functions[Math.floor(Math.random()*functions.length)]();
}, 200);

This would call every 200 millisecondes one of your three functions (dSqu, dCir or dTri), taken randomly.

In order to have this working, you need to have the functions visible. You may for example change your code to

<script>
var canvas = document.getElementById('example1');
var context = canvas.getContext('2d');
function dSqu(){    
    ...
}
function dCir(){    
    ...
}
function dTri(){
    ...
}
var functions = [dSqu, dCir, dTri];
setInterval(function(){
   functions[Math.floor(Math.random()*functions.length)]();
}, 200);
</script>