timeout function for simple html 5 javascript animation using canvas

Question

I have been trying this simple animation with html 5 and javascript from here:

http://www.developphp.com/view.php?tid=1262

The code is follwoing:

<!-- Lesson by Adam Khoury @ www.developphp.com -->
<!-- Watch the video to get code explanation line by line -->
<!-- http://www.youtube.com/watch?v=hUCT4b4wa-8 -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas{border:#666 1px solid;}
</style>
<script type="text/javascript">
function draw(x,y){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.save();
    ctx.clearRect(0,0,550,400);
    ctx.fillStyle = "rgba(0,200,0,1)";
    ctx.fillRect (x, y, 50, 50);
    ctx.restore(); 
    x += 1;
        var loopTimer = setTimeout('draw('+x+','+y+')',100);
}
</script>
</head>
<body>
<button onclick="draw(0,0)">Draw</button>
<canvas id="canvas" width="550" height="400"></canvas>
</body>  
</html>

There is just one thing i don't understand in the code: in the setTimeout method what does the '+' before and after x and y do and why quotes are used to enclose +x+ and +y+?

it is concatenating a string with a variable.

Prabhu Murthy
– Prabhu Murthy

2014-09-22 09:16:47 +00:00
Commented Sep 22, 2014 at 9:16 — Prabhu Murthy
– Prabhu Murthy, Commented Sep 22, 2014 at 9:16
Duplicate of Calling functions with setTimeout()??

karan3112
– karan3112

2014-09-22 09:17:36 +00:00
Commented Sep 22, 2014 at 9:17 — karan3112
– karan3112, Commented Sep 22, 2014 at 9:17

Finoy Francis · Accepted Answer · 2014-09-22 09:40:53Z

3

'draw('+x+','+y+')' This is a just string concatination you will understand this by printing that string. following fiddle explains more.

http://jsfiddle.net/zebqqcee/

answered Sep 22, 2014 at 9:40

Finoy Francis

6965 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manjar · Accepted Answer · 2014-09-22 09:17:37Z

0

The setTimeout will execute the instruction with an eval, I mean this will execute when the timeout pop this:

eval('draw('+x+','+y+')');

If you don't like this syntax, I personally don't, you can use this:

var loopTimer = setTimeout(function() {
     draw(x,y);
},100);

answered Sep 22, 2014 at 9:17

Manjar

3,2781 gold badge35 silver badges45 bronze badges

2 Comments

student101 Over a year ago

thanks. is it possible to draw another green little rectangle starting from bottom-right of the canvas to bottom left within the same context?

Manjar Over a year ago

yes, it is possible, but you will need to parametrized the color, which is used in ctx.fillStyle = "rgba(0,200,0,1)" and also the direction which is used in x += 1; you function header should look like function draw(x,y,color,direction); and you will call it 2 times

Collectives™ on Stack Overflow

timeout function for simple html 5 javascript animation using canvas

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related