JavaScript Canvas Animation Using SetTimeout()

Question

I've been working on a chunk of code for a would-be Sierpinski fractal animation, but for some reason, the animation part just doesn't seem to work. I also tried using setInterval(), with the same results, namely a blank canvas. The idea is to draw an equilateral triangle with vertex coordinates as parameters step by step, as though somebody was drawing it on a piece of paper. Could you have a look to see what's wrong with it?

On a side note, I've copied a few examples of canvas animation off a few web tutorials, and none of them appear to be working in my files either. I use Firefox and Chrome, both up to date, so I guess it's not a technical issue.

<!DOCTYPE html>

<style>
  canvas {
   width: 600px;
   height: 600px;
   text-align: center;
   background-color: white;
   background-position: center;
   position: relative;
   top: 0px;
   left: 0px;
   border:1px solid #d3d3d3;
  }

<body>

<canvas id="sCanvas"></canvas>

<script>

This is where the animation is supposed to take place; draws a line from (Ax,Ay) to (Bx,By).

function lineAnimation(x1,y1,x2,y2,ctx) {
  var deltaX = (x2 - x1) / 100;
  var deltaY = (y2 - y1) / 100;
  var x = x1;
  var y = y1;
  var timer = setInterval(function () {
    ctx.moveTo(x,y);
    ctx.lineTo(x+deltaX,y+deltaY);
    ctx.stroke();
    x += deltaX;
    y += deltaY;
  }, 100);
  if ((x===x2) && (y===y2)) clearTimeout(timer);
}



function drawTriangle(Ax,Ay,Bx,By,Cx,Cy,ctx) {

    lineAnimation(Ax,Ay,Bx,By,ctx);
    lineAnimation(Bx,By,Cx,Cy,ctx);
    lineAnimation(Cx,Cy,Ax,Ay,ctx);

}

function init() {

  var canvas=document.getElementById("sCanvas");
  var ctx = canvas.getContext("2d");
  ctx.save();
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;

  drawTriangle(10,10,30,50,50,10);

}

init();

</script>

Spencer Wieczorek · Accepted Answer · 2015-04-20 04:40:35Z

1

Your functions are requiring the parameter ctx which you didn't include, as such they don't know what ctx is. All you need to do is include it in drawTriangle():

drawTriangle(10,10,30,50,50,10,ctx);

And then everything works.

answered Apr 20, 2015 at 4:40

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

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

1 Comment

the-space-zeddie Over a year ago

Damn. Thanks a lot. Reminds me of that time I was searching for a semicolon for 3 hours.

cracker · Accepted Answer · 2015-04-20 05:10:09Z

Try This

function lineAnimation(x1,y1,x2,y2,ctx) {
  var deltaX = (x2 - x1) / 100;
  var deltaY = (y2 - y1) / 100;
  var x = x1;
  var y = y1;
  var timer = setInterval(function () {
    var canvas=document.getElementById("sCanvas"); //Added Change
    var ctx = canvas.getContext("2d"); //Added Change
    ctx.moveTo(x,y);
    ctx.lineTo(x+deltaX,y+deltaY);
    ctx.stroke();
    x += deltaX;
    y += deltaY;
  }, 100);
  if ((x===x2) && (y===y2)) clearTimeout(timer);
}



function drawTriangle(Ax,Ay,Bx,By,Cx,Cy,ctx) {

    lineAnimation(Ax,Ay,Bx,By,ctx);
    lineAnimation(Bx,By,Cx,Cy,ctx);
    lineAnimation(Cx,Cy,Ax,Ay,ctx);

}

function init() {

  var canvas=document.getElementById("sCanvas");
  var ctx = canvas.getContext("2d");
  ctx.save();
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 2;

  drawTriangle(10,10,30,50,50,10);

}

init();

It is giving you an error over ctx.moveTo(x,y); and ctx.lineTo(x+deltaX,y+deltaY); because thet are not able to use you ctx which is basically an object of your canvas. so just try to add them in code and things will work fine

DEMO

Collectives™ on Stack Overflow

JavaScript Canvas Animation Using SetTimeout()

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related