How to hide an element after drawing on canvas with setTimeout Javascript

Question

I have used JavaScript to draw circles at specific points onto the canvas after set times using SetTimeout after I have pressed a button.

How do i make the circles then disappear after a set time or before the next one appears?

JavaScript

//button
function MButton() {
    drawOnCanvas();

    Circle();
    Circle2();
}

function drawOnCanvas() {

    var canvas = document.getElementById("canvas_1");

    if (canvas.getContext) {
        canvas_context = canvas.getContext("2d");
        //alert("alert draw");
        setTimeout();
    }
}

function Circle() {
    setTimeout(function () {
        canvas_context.fillStyle = "red";
        canvas_context.beginPath();
        canvas_context.arc(195, 180, 10, 0, Math.PI * 2, true);
        canvas_context.closePath();
        canvas_context.fill();
    }, 300);
}

function Circle2() {
    setTimeout(function () {
        canvas_context.fillStyle = "red";
        canvas_context.beginPath();
        canvas_context.arc(285, 180, 10, 0, Math.PI * 2, true);
        canvas_context.closePath();
        canvas_context.fill();
    }, 1500);
}

HTML

<CANVAS WIDTH="360" HEIGHT="300" ID="canvas_1">
    Canvas tag not supported
</CANVAS>

<INPUT TYPE ="Button" VALUE="  Play  " onClick="MButton()">

I am new to this and I would really appreciate the help!

score 3 · Answer 1 · answered Mar 07 '14 at 03:40

Here are the general steps to creating canvas circles that disappear after a specified time

Create javascript objects for each circle containing info about that circle.

The object holds info on how to draw the circle: x,y,radius,color

The object also holds info on how long the object will appear after being drawn. That's visibleDuration in the example below. visibleDuration:750 indicates this circle should remain visible for 750ms and then disappear

The object also hold info on how much longer it should display before it disappears. That's visibleCountdown in the example below. When the user clicks the "Display Red Circle" button, visibleCountdown will be set to 750. visibleCountdown is decremented in the animation frame.

circles.red=({
    x:100,
    y:100,
    radius:25,
    color:"red",
    visibleDuration:750,    // this circle disappears after 750ms
    visibleCountdown:0      // this is used as a display countdown timer for this circle
});

Create an animation loop with the efficient requestAnimationFrame method.

requestAnimationFrame is preferred to setTimeout for performance reasons (check out why on Google!)

// begin the animation loop

animate();

// This is an animation loop using the highly-efficient requestAnimationFrame method
// It will run about 60 x per second

function animate(){

    requestAnimationFrame(animate);

}

Inside the animation loop, draw each circle if their visibleCountdown has not expired

// reduce visibleCountdown by the elapsed time

visibleCountdown -= elapsedTimeSinceLastTimeInLoop

if(visibleCountdown>0){

    // draw this circle since it's countdown is still above zero

}

Here is example code and a Demo: http://jsfiddle.net/m1erickson/utdG8/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var circles={};
    circles.red=({
        x:100,
        y:100,
        radius:25,
        color:"red",
        visibleDuration:750,
        visibleCountdown:0
    });
    circles.blue=({
        x:175,
        y:150,
        radius:20,
        color:"blue",
        visibleDuration:1500,
        visibleCountdown:0
    });

    var startTime=lastTime=performance.now();

    animate();

    function animate(currentTime){

        requestAnimationFrame(animate);

        ctx.clearRect(0,0,canvas.width,canvas.height);

        var elapsed=currentTime-lastTime;
        lastTime=currentTime;

        for(var i in circles){
            var circle=circles[i];
            circle.visibleCountdown-=elapsed;
            if(circle.visibleCountdown>0){
                drawCircle(circle);
            }
        }
    }

    function drawCircle(circle){
        ctx.globalAlpha=circle.visibleCountdown/circle.visibleDuration;
        ctx.beginPath();
        ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=circle.color;
        ctx.fill();
        ctx.globalAlpha=1.00;
    }

    function showCircle(circle){
        circle.visibleCountdown=circle.visibleDuration
    }

    $("#red").click(function(){
        showCircle(circles["red"]);
    });

    $("#blue").click(function(){
        showCircle(circles["blue"]);
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="red">Show Red for 0.75 seconds</button><br>
    <button id="blue">Show Blue for 1.50 seconds</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

score 0 · Answer 2 · answered Mar 06 '14 at 20:42

0

You have to use the clearRect command

context.clearRect ( x , y , w , h );

This will wipe out the area for you!

answered Mar 06 '14 at 20:42

Brent Echols

590
2
9

Where would I put that command, and I have also used javascript to draw items which are used for the background which are there before i press the button and that I want to stay there and not get cleared. – user3389907 Mar 06 '14 at 20:57
So I'm not 100% sure what you are trying to achieve, but if you want to clear an arbitrary spot after x seconds: function (circle) { setTimeout(function () { context.clearRect (circle.x, circle.y, circle.width, circle.height); }, xSeconds); } – Brent Echols Mar 06 '14 at 21:04
1

So you can't really achieve that to my knowledge using a canvas. If you need multiple layers of independent drawing, check this thread: http://stackoverflow.com/questions/3008635/html5-canvas-element-multiple-layers – Brent Echols Mar 06 '14 at 21:08

How to hide an element after drawing on canvas with setTimeout Javascript

2 Answers2