Code error in <canvas>

Question

I’m using a jsfiddle code (http://jsfiddle.net/z52eh9vd/) to create lines, through the canvas (over a map, to make a route) - I am very much started in the same programming!

the canva is there, the lines appear and work, but always appears this error, which increases all the time.

Uncaught TypeError: Cannot read property 'mx' of undefined
    at renderLine (animemapa.js:73)
    at gameLoop (animemapa.js:61)

How can I fix it? Thank you!

(function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame =
      window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());




var pos = [{
    x: 900,
    y: 100,
    mx: 0,
    my: 0
  },
  {
    x: 10,
    y: 100,
    mx: 0,
    my: 0
  },
  {
    x: 80,
    y: 200,
    mx: 10,
    my: 100
  },
  {
    x: 300,
    y: 100,
    mx: 80,
    my: 200
  }
];

function gameLoop() {

  window.requestAnimationFrame(gameLoop);

  renderLine();

}

var width = 10;
var height = 10;
var ticks = 0;
var MAX = 4;
var s = 0;

function renderLine() {
  if (slow()) {
    ctx.moveTo(pos[ticks].mx, pos[ticks].my, 0, 0);
    ctx.lineTo(pos[ticks].x, pos[ticks].y);
    ctx.stroke();
    ticks = (ticks > MAX) ? 0 : ticks + 1;
  }

}

function slow() {
  var rend = false
  if (s > 30) {
    s = 0;
    rend = true;
  } else {
    s += 1;
  }
  return rend;
}
//Setting up canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var image = document.getElementById("mapa");
ctx.drawImage(image, 0,0, c.width, c.height);


ctx.strokeStyle="#00BB82";

Answer 1

The problem is that the pos[ticks].mx is trying to access a non-existent value, because the object var pos only has 4 inputs. When he tries to pull the 5th, gives undefined.

You can resolve by changing the if of:

if (slow()) {

for:

if (slow() && pos[ticks]) {

where pos[ticks] will check if there is the value to then execute the code.

Would look like this:

(function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame =
      window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

var pos = [{
    x: 300,
    y: 100,
    mx: 0,
    my: 0
  },
  {
    x: 10,
    y: 100,
    mx: 0,
    my: 0
  },
  {
    x: 80,
    y: 200,
    mx: 10,
    my: 100
  },
  {
    x: 300,
    y: 100,
    mx: 80,
    my: 200
  }
];

function gameLoop() {

   window.requestAnimationFrame(gameLoop);

  renderLine();

}

var width = 10;
var height = 10;
var ticks = 0;
var MAX = 4;
var s = 0;

function renderLine() {
  if (slow() && pos[ticks]) {
    ctx.moveTo(pos[ticks].mx, pos[ticks].my, 0, 0);
    ctx.lineTo(pos[ticks].x, pos[ticks].y);
    ctx.stroke();
    ticks = (ticks > MAX) ? 0 : ticks + 1;
  }

}

function slow() {
  var rend = false
  if (s > 30) {
    s = 0;
    rend = true;
  } else {
    s += 1;
  }
  return rend;
}
//Setting up canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

gameLoop();
/*
ctx.moveTo(0,0,0,0);
ctx.lineTo(300,100);
ctx.stroke();

ctx.moveTo(0,0,0,0);
ctx.lineTo(10,100);
ctx.stroke();

ctx.moveTo(10,100,0,0);
ctx.lineTo(80,200);
ctx.stroke();

ctx.moveTo(80,200,0,0);
ctx.lineTo(300,100);
ctx.stroke();
*/

<canvas id="myCanvas" width="400" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>