Drawing lines using RequestAnimationFrame()

Question

I want to draw a horizontal line when the game launches and was able to come up with something that drew the line using requestAnimationFrame() and ctx.stroke().

The problem is that when I attempt to edit the length of the line by changing the values of the end point on the line, the line remains the same length.

If anyone could take a look at it and explain what is going on I would really appreciate it.

var canvasTop = document.getElementById('top');
var ctxTop = canvasTop.getContext('2d');

var frameCountTop = 0;
var fpsTop, fpsIntervalTop, startTimeTop, nowTop, thenTop, elapsedTop;

function startAnimatingTop(fpsTop) {
    fpsIntervalTop = 1000 / fpsTop;
    thenTop = Date.now();
    startTimeTop = thenTop;
    drawTop();
}

var topLinePointA = [32, 80];
var topLinePointB = [280, 80];
var topLineStart = topLinePointA[0];
var topLineIncrement = topLineStart + 1;
var topLineEnd = topLinePointB[0];

function drawTop() {
  var i = 32;
  while (i < topLineEnd) {
    requestAnimationFrame(drawTop);
    i++;
    nowTop = Date.now();
    elapsedTop = nowTop - thenTop;
    if (elapsedTop > fpsIntervalTop && i < topLineEnd) {
        thenTop = nowTop - (elapsedTop % fpsIntervalTop);
        ctxTop.lineWidth = 20;
        ctxTop.strokeStyle = "black";
        ctxTop.moveTo(topLineStart, 80);
        ctxTop.lineTo(topLineIncrement, 80);
        ctxTop.stroke();
        topLineStart += 1;
    } else {
      cancelAnimationFrame(drawTop);
      return;
    }
  }
}

startAnimatingTop(100);

/*HANGMAN STYLES*/

/*CLASS SELECTORS*/
.lineContainer {
  /*border-style: solid;
  border-color: blue;*/
}

#top {
  position: absolute;
  height: 5%;
  width: 45%;
  left: 30%;
}

#side {
  position: absolute;
  bottom: 20%;
  left: 70%;
  height: 78%;
  width: 5%;
}

#bottom {
  position: absolute;
  bottom: 35%;
  height: 5%;
  width: 56%;
  left: 20%;
}

#hangman {
  position: absolute;
  left: 30%;
  height: 40%;
  width: 10%;
}

<canvas id='top' class='lineContainer'></canvas>
<canvas id='side' class='lineContainer'></canvas>
<canvas id='bottom' class='lineContainer'></canvas>
<canvas id='hangman' class='lineContainer'></canvas>
<canvas id='puzzle'></canvas>
<div id='scorecard'>

</div>

Answer 1

There are many problems with your code.

You need to read up on using the canvas. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D will help.

1. Only call requestAnimationFrame once per frame. Putting it inside a while loop will just start 1000's of frames fighting for display refresh.
2. Start paths with ctx.beginPath();
3. Clear the canvas using ctx.clearRect(0,0,width,height)
4. Set canvas size via attributes not via style properties.
5. The first argument to the function called by requestAnimationFrame is the time. eg drawTop(time)

See comments for more info.

ctx.canvas.width = 100;  // << set the canvas size via canvas attributes not style
ctx.canvas.height = 100;

var thenTop = performance.now(); // to get time.

requestAnimationFrame(drawTop); // <<< start the render loop with request, dont call direct

function drawTop(nowTop) { // << time passed to render call
  requestAnimationFrame(drawTop);  //                                 <<< put call here not in loop
  ctxTop.clearRect(0, 0, ctxTop.canvas.width, ctxTop.canvas.height);  // <<<  clear the canvas
  var i = 32;
  while (i < topLineEnd) {
    // requestAnimationFrame(drawTop); //      <<<<<<< Not here
    i++;

    elapsedTop = nowTop - thenTop;
    if (elapsedTop > fpsIntervalTop && i < topLineEnd) {
        thenTop = nowTop - (elapsedTop % fpsIntervalTop);
        ctxTop.lineWidth = 20;
        ctxTop.strokeStyle = "black";
        ctxTop.beginPath();  //            <<<<<< To start a new path
        ctxTop.moveTo(topLineStart, 80);
        ctxTop.lineTo(topLineIncrement, 80);
        ctxTop.stroke();
        topLineStart += 1;
    } else {
      return;
    }
  }
}