I can't get my line thickness to respond correctly to modified input

In the following code snippet, I cannot get the thickness of the y-axis for my work-in-progress graphing calculator to respond properly to the variable axes.y.thickness.

            var axes = {
              x: {
                show: true,
                keepOnScreen: false,
                thickness: 1,
                color: {
                  red: 0,
                  blue: 0,
                  green: 0
                }
              },
              y: {
                show: true,
                keepOnScreen: false,
                thickness: 10,
                color: {
                  red: 0,
                  blue: 0,
                  green: 0
                }
              }
            };

            function drawAxes() {
              strokeWeight(axes.x.thickness);
              strokeColor(axes.x.color.red, axes.x.color.green, axes.x.color.blue);
              if (axes.x.show) {
                if (axes.x.keepOnScreen && sign(range.x.min) === sign(range.x.max) && sign(range.x.min) !== 0) {
                  if (sign(range.x.min) === -1) {
                    line(400, 0, 400, 400);
                  } else {
                    line(0, 0, 0, 400);
                  }
                } else {
                  line(map(0, range.x.min, range.x.max, 0, 400), 0, map(0, range.x.min, range.x.max, 0, 400), 400);
                }
              }
              strokeWeight(axes.y.thickness);
              strokeColor(axes.y.color.red, axes.y.color.green, axes.y.color.blue);
              if (axes.y.show) {
                if (axes.y.keepOnScreen && sign(range.y.min) === sign(range.y.max) && sign(range.y.min) !== 0) {
                  if (sign(range.y.min) === -1) {
                    line(0, 0, 400, 0);
                  } else {
                    line(0, 400, 400, 400);
                  }
                } else {
                  line(0, map(0, range.y.min, range.y.max, 0, 400), 400, map(0, range.y.min, range.y.max, 0, 400));
                }
              }
            };
            drawAxes();

This is the entire program:

<!DOCTYPE html>
<html>

<head>
  <style>
    canvas {
      border: 1px solid #000000;
    }
  </style>
  <meta charset="utf-8">
  <title>Graphing Calculator 2.0</title>
</head>

<body>
  <canvas id="canvas" width="400" height="400">Error: Your browser does not support HTML 5 canvases.</canvas>
  <script>
    //reference: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage
     //math object: http://www.w3schools.com/js/js_math.asp
     //TODO: define map and lerp functions
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    function rgb(red, green, blue) {
      return "rgb(" + red + "," + green + "," + blue + ")";
    }

    function map(value, low1, high1, low2, high2) {
      return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
    }

    function lerp(num1, num2, amount) {
      return map(amount, 0, 1, num1, num2);
    }

    function strokeColor(red, green, blue) {
      ctx.strokeStyle = rgb(red, green, blue);
    }

    function strokeWeight(weight) {
      ctx.lineWidth = weight;
    }

    function line(x1, y1, x2, y2) {
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
    }
    var colors = {
      background: {
        red: 0,
        green: 0,
        blue: 255
      },
      f: {
        red: 0,
        green: 171,
        blue: 0
      }
    };
    var pos = {
      x: 0,
      y: 0
    };
    var sign = function(number) {
      if (number === 0) {
        return 0;
      } else {
        return (abs(number)) / number;
      }
    };
    var range = {
      x: {
        max: 50,
        min: -10
      },
      y: {
        max: 10,
        min: -10
      }
    };
    var axes = {
      x: {
        show: true,
        keepOnScreen: false,
        thickness: 1,
        color: {
          red: 0,
          blue: 0,
          green: 0
        }
      },
      y: {
        show: true,
        keepOnScreen: false,
        thickness: 10,
        color: {
          red: 0,
          blue: 0,
          green: 0
        }
      }
    };

    function f(x, y) {
      var leftSide = x;
      var rightSide = sq(y) - 5;
      return abs(leftSide - rightSide) <= 1;
    }

    function drawAxes() {
      strokeWeight(axes.x.thickness);
      strokeColor(axes.x.color.red, axes.x.color.green, axes.x.color.blue);
      if (axes.x.show) {
        if (axes.x.keepOnScreen && sign(range.x.min) === sign(range.x.max) && sign(range.x.min) !== 0) {
          if (sign(range.x.min) === -1) {
            line(400, 0, 400, 400);
          } else {
            line(0, 0, 0, 400);
          }
        } else {
          line(map(0, range.x.min, range.x.max, 0, 400), 0, map(0, range.x.min, range.x.max, 0, 400), 400);
        }
      }
      strokeWeight(axes.y.thickness);
      strokeColor(axes.y.color.red, axes.y.color.green, axes.y.color.blue);
      if (axes.y.show) {
        if (axes.y.keepOnScreen && sign(range.y.min) === sign(range.y.max) && sign(range.y.min) !== 0) {
          if (sign(range.y.min) === -1) {
            line(0, 0, 400, 0);
          } else {
            line(0, 400, 400, 400);
          }
        } else {
          line(0, map(0, range.y.min, range.y.max, 0, 400), 400, map(0, range.y.min, range.y.max, 0, 400));
        }
      }
    };
    drawAxes();
  </script>
</body>

</html>

If someone could please help me to figure out why the variable axes.x.thickness responds perfectly, but the variable axes.y.thickness only works when its value is greater than that of axes.x.thickness, that would be great. Also, a solution would be helpful, but possibly not necessary.

Solution

Your problem lies in the fact that you forgot to execute beginPath() on your context before drawing each line. Adding this into your line function does the trick:

function line(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}