Canvas animation not working as intended

Question

If you run the code below you will notice that the y value is increasing as expected in the console. However the circle on the canvas is not moving along the y axis as expected. Anybody have any idea why?

If you scroll down to the render() function you will see that I'm increasing y with y += 5;.

'use strict';

(function () {

  const canvas = document.getElementsByClassName('canvas')[0],
        c = canvas.getContext('2d');

  // Circle
  var circleRadius = 50,
      x = (canvas.width/2) - circleRadius, // inital x position of the ball
      y = (canvas.height/2) - circleRadius, // inital y position of the ball
      segments = 4,
      bezieCircleFormula = (4/3)*Math.tan(Math.PI/(2*segments)), // http://stackoverflow.com/a/27863181/2040509
      pointOffset = {
        positive: bezieCircleFormula*circleRadius,
        negative: circleRadius-(bezieCircleFormula*circleRadius)
      },
      // Each side has 3 points, bezier 1, circle point, bezier 2
      // These are listed below in clockwise order.
      // So top has: left bezier, circle point, right bezier
      // Right has: top bezier, circle point, bottom bezier
      circlePoints = {
        top: [
          [x+pointOffset.negative, y],
          [x+circleRadius, y],
          [x+pointOffset.positive+circleRadius, y]
        ],
        right: [
          [x+circleRadius*2, y+pointOffset.negative],
          [x+circleRadius*2, y+circleRadius],
          [x+circleRadius*2, y+pointOffset.positive+circleRadius]
        ],
        bottom: [
          [x+pointOffset.positive+circleRadius, y+circleRadius*2],
          [x+circleRadius, y+circleRadius*2],
          [x+pointOffset.negative, y+circleRadius*2]
        ],
        left: [
          [x, y+pointOffset.positive+circleRadius],
          [x, y+circleRadius],
          [x, y+pointOffset.negative]
        ]
      };

  // For `side` you can pass `top`, `right`, `bottom`, `left`
  // For `amount` use an interger
  function squish (side, squishAmount) {
    for (let i = 0; i < circlePoints[side].length; i++) {
      if (side === 'top') {
        circlePoints[side][i][1] += squishAmount;
      } else if (side === 'right') {
        circlePoints[side][i][0] -= squishAmount;
      } else if (side === 'bottom') {
        circlePoints[side][i][1] -= squishAmount;
      } else if (side === 'left') {
        circlePoints[side][i][0] += squishAmount;
      }
    }
  }

  function render () {

    // Clear the canvas
    c.clearRect(0, 0, canvas.width, canvas.height);

    // Draw a circle using bezier curves
    c.beginPath();
    c.moveTo(circlePoints.left[1][0], circlePoints.left[1][1]);
    c.bezierCurveTo(circlePoints.left[2][0], circlePoints.left[2][1], circlePoints.top[0][0], circlePoints.top[0][1], circlePoints.top[1][0], circlePoints.top[1][1]);
    c.bezierCurveTo(circlePoints.top[2][0], circlePoints.top[2][1], circlePoints.right[0][0], circlePoints.right[0][1], circlePoints.right[1][0], circlePoints.right[1][1]);
    c.bezierCurveTo(circlePoints.right[2][0], circlePoints.right[2][1], circlePoints.bottom[0][0], circlePoints.bottom[0][1], circlePoints.bottom[1][0], circlePoints.bottom[1][1]);
    c.bezierCurveTo(circlePoints.bottom[2][0], circlePoints.bottom[2][1], circlePoints.left[0][0], circlePoints.left[0][1], circlePoints.left[1][0], circlePoints.left[1][1]);
    c.stroke();
    c.closePath();

    // Doing this for animation
    y += 5;

    console.log(y);

    requestAnimationFrame(render);
  }

  render();

})();

<canvas class="canvas" width="200" height="200"></canvas>

Answer 1

Because y doesn't affect the circle in any way. It's used to generate circlePoints by having the value of y at that moment being passed by value, so that any changes done to y are not reflected inside circlePoints. You need to update circlePoints if you want to see those changes because it won't update dynamically since y is a primitive and thus passed by value:

'use strict';

(function () {

  const canvas = document.getElementsByClassName('canvas')[0],
        c = canvas.getContext('2d');

  // Circle
  var circleRadius = 50,
      x = (canvas.width/2) - circleRadius, // inital x position of the ball
      y = (canvas.height/2) - circleRadius, // inital y position of the ball
      segments = 4,
      bezieCircleFormula = (4/3)*Math.tan(Math.PI/(2*segments)), // http://stackoverflow.com/a/27863181/2040509
      pointOffset = {
        positive: bezieCircleFormula*circleRadius,
        negative: circleRadius-(bezieCircleFormula*circleRadius)
      },
      // Each side has 3 points, bezier 1, circle point, bezier 2
      // These are listed below in clockwise order.
      // So top has: left bezier, circle point, right bezier
      // Right has: top bezier, circle point, bottom bezier
      circlePoints = {
        top: [
          [x+pointOffset.negative, y],
          [x+circleRadius, y],
          [x+pointOffset.positive+circleRadius, y]
        ],
        right: [
          [x+circleRadius*2, y+pointOffset.negative],
          [x+circleRadius*2, y+circleRadius],
          [x+circleRadius*2, y+pointOffset.positive+circleRadius]
        ],
        bottom: [
          [x+pointOffset.positive+circleRadius, y+circleRadius*2],
          [x+circleRadius, y+circleRadius*2],
          [x+pointOffset.negative, y+circleRadius*2]
        ],
        left: [
          [x, y+pointOffset.positive+circleRadius],
          [x, y+circleRadius],
          [x, y+pointOffset.negative]
        ]
      };

  // For `side` you can pass `top`, `right`, `bottom`, `left`
  // For `amount` use an interger
  function squish (side, squishAmount) {
    for (let i = 0; i < circlePoints[side].length; i++) {
      if (side === 'top') {
        circlePoints[side][i][1] += squishAmount;
      } else if (side === 'right') {
        circlePoints[side][i][0] -= squishAmount;
      } else if (side === 'bottom') {
        circlePoints[side][i][1] -= squishAmount;
      } else if (side === 'left') {
        circlePoints[side][i][0] += squishAmount;
      }
    }
  }

  function render () {
    
    circlePoints = {
        top: [
          [x+pointOffset.negative, y],
          [x+circleRadius, y],
          [x+pointOffset.positive+circleRadius, y]
        ],
        right: [
          [x+circleRadius*2, y+pointOffset.negative],
          [x+circleRadius*2, y+circleRadius],
          [x+circleRadius*2, y+pointOffset.positive+circleRadius]
        ],
        bottom: [
          [x+pointOffset.positive+circleRadius, y+circleRadius*2],
          [x+circleRadius, y+circleRadius*2],
          [x+pointOffset.negative, y+circleRadius*2]
        ],
        left: [
          [x, y+pointOffset.positive+circleRadius],
          [x, y+circleRadius],
          [x, y+pointOffset.negative]
        ]
      };

    // Clear the canvas
    c.clearRect(0, 0, canvas.width, canvas.height);

    // Draw a circle using bezier curves
    c.beginPath();
    c.moveTo(circlePoints.left[1][0], circlePoints.left[1][1]);
    c.bezierCurveTo(circlePoints.left[2][0], circlePoints.left[2][1], circlePoints.top[0][0], circlePoints.top[0][1], circlePoints.top[1][0], circlePoints.top[1][1]);
    c.bezierCurveTo(circlePoints.top[2][0], circlePoints.top[2][1], circlePoints.right[0][0], circlePoints.right[0][1], circlePoints.right[1][0], circlePoints.right[1][1]);
    c.bezierCurveTo(circlePoints.right[2][0], circlePoints.right[2][1], circlePoints.bottom[0][0], circlePoints.bottom[0][1], circlePoints.bottom[1][0], circlePoints.bottom[1][1]);
    c.bezierCurveTo(circlePoints.bottom[2][0], circlePoints.bottom[2][1], circlePoints.left[0][0], circlePoints.left[0][1], circlePoints.left[1][0], circlePoints.left[1][1]);
    c.stroke();
    c.closePath();

    // Doing this for animation
    y += 5;

    console.log(y);

    requestAnimationFrame(render);
  }

  render();

})();

<canvas class="canvas" width="200" height="200"></canvas>