javascript - Draw continuous lines on HTML canvas one after the other

Question

I am trying to write code for the above described problem. I tried finding a solution. This is what I currently have.

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

var drawColorLine = function(start, end, color) {
  var deltaX, deltaY, i = 0,
    currLength = 0,
    isHor, isVert;

  deltaX = end[0] - start[0];
  deltaY = end[1] - start[1];
  context.strokeStyle = color;

  isHor = deltaX === 0 ? 0 : 1;
  isVert = deltaY === 0 ? 0 : 1;

  function draw() {
    context.beginPath();
    context.moveTo(start[0] + currLength * isHor, start[1] + currLength * isVert);

    currLength = currLength + 0.5 * i;
    context.lineTo(start[0] + currLength * isHor, start[1] + currLength * isVert);
    context.stroke();

    if (currLength <= Math.max(deltaX, deltaY)) {
      i = i + 1;
      requestAnimationFrame(draw);
    }
  }
  draw();
};

drawColorLine([40, 40], [100, 40], '#116699');
drawColorLine([40, 40], [40, 100], '#bb11dd');

<canvas id='canvas' width='400' height='400'></canvas>

Answer 1

Yes, you can use promises, altough for learning purposes you might want to write a pure callback solution first.

You'll want to have a look at my rules of thumb for promise development. Let's apply them here:

1. Every asynchronous function must return a promise.

   These would be drawColorLine, draw, and requestAnimationFrame in your case.

2. As requestAnimationFrame is a native, primitively asynchronous function that unfortunately still takes a callback, we'll have to promisify it:

   function getAnimationFrame() {
       return new Promise(function(resolve) {
           requestAnimationFrame(resolve); // this promise never gets rejected
           // TODO: cancellation support :-)
       });
   }
   

3. Everything that follows an asynchronous action goes into a .then() callback:

   function drawColorLine(start, end, color) {
       … // initialisation
   
       function draw() {
           … // do work
           // always return a promise:
           if (/* furter work */) {
               i++;
               return getAnimationFrame().then(draw); // magic happens here :-)
           } else {
               return Promise.resolve(…); // maybe have a path object as eventual result?
                                          // or anything else, including nothing (no arg)
           }
       }
       return draw(); // returns a promise - but don't forget the `return`
   }
   

Voila!

drawColorLine([40, 40], [100, 40], '#116699').then(function() {
    return drawColorLine([40, 40], [40, 100], '#bb11dd');
}).then(console.log.bind(console, "both lines drawn"));