Is it true that, if possible, I should never use setInterval & setTimeout?

I am learning code in JavaScript. I am programming something with some temporary mouse animation. I'm just about to add some code that draws the mouse path.

This will be something that takes a mousemove event, and every time the mice move, draw a new linear path on the Canvas. And over time, this path will become more transparent until it disappears. Of course, new paths will always be opaque, so there is continuous movement.

I figured out the way I can do this with requestanimationframe. Basically every time a new mousemove event occurs, I add the coordinates of the mouse path to an array of objects called mousePathArray. The object will carry the coordinates of the path and the "animationStage" counter. This counter will basically determine how transparent the path will be at this stage of the "animation". (Later steps will be more transparent.)

Then, each animation frame, I will call a function that will loop through all the objects in the array and draw lines according to their coordinates and animationStage counter, increment the counter by 1 and remove the array objects if the animation counter reaches a finite number (which could be 50 or something else).

All of this can be done, but it looks like it would be much easier to do instead of all of this by simply introducing a setInterval function that will be called at a given interval every time the mouse is moved.

So is it worth the long journey? Would it be faster or maybe just better use JS to avoid using setInterval and rAF together?

After writing all this, I wrote the rAF code that I mentioned above. It's too long to put in here, but the rules dictate it. It's on jsfiddle here: http://jsfiddle.net/06f7zefn/2/

(I know there is a lot of inefficiency and probably terrible coding practice, but bear with me, I'm already 5 days old! I can do isDrawing? Boolean instead of calling animate () for each frame, and I can just do ctx.moveTo () once, and the rest is LineTo () without having to moveTo () each iteration, since one point comes from where the other was left)

If I could understand the main idea I'm talking about, this is where I ask for your opinion. Instead of everything related to synchronization arising from the rAF call, would it be better to use setInterval or setTimeout here?

var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

var currentPosX, currentPosY, prevPosX, prevPosY;
var mousePathArray = [];

canvas.addEventListener ('mousemove', mouseOp);


function mouseOp (mouseEvent) {
    prevPosX = currentPosX;
    prevPosY = currentPosY;
    currentPosX = mouseEvent.clientX;
    currentPosY = mouseEvent.clientY;
    mousePathArray.push( {
        x1: currentPosX,
        x2: prevPosX,
        y1: currentPosY,
        y2: prevPosY,
        animStage: 0
    });
}

function animate () {
    var anims = mousePathArray.length;
    if (anims!=0) {
        for (i=0; i<anims; i++) {
            if (mousePathArray[i].animStage == 20) {
                mousePathArray.splice(i, 1);
                i--;
                anims--;
                continue;
            }

            drawLine(mousePathArray[i].x1, mousePathArray[i].x2, mousePathArray[i].y1, mousePathArray[i].y2, 1 - (mousePathArray[i].animStage * 0.05));
            mousePathArray[i].animStage ++;
        }
    }
}

function drawLine (x1, x2, y1, y2, alpha) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = "rgba(150, 20, 150," + alpha +")";
    ctx.stroke();
}

animloop();

function animloop(){
  window.requestAnimationFrame(animloop);
  gameLoop();
}

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    animate();
}