How to draw the x axis and y axis for a dynamic chart drawn using an HTML canvas

Question

How to draw the x axis and y axis for a dynamic chart drawn using an HTML canvas

I want to draw the x axis and y axis for my dynamic diagram created using the html element in CANVAS format. The chart contains a moving line, which is a set of objects with x and y attributes representing x and y coordinates. The value of these points should be displayed along the x axis and y axis. The x axis and y axis should display the x and y coordinates of the points on the moving line. Plunker for my code: https://plnkr.co/edit/zo2dmHTzjywMnt5NIWUT?p=preview

My current code is:

<html>

<head>
  <style type="text/css">
    #wave {
      background: #AAA;
    }
  </style>
</head>

<body>
  <canvas id="wave"></canvas>
  <script type="text/javascript">
    var dataArray = [{
      x: 0,
      y: 0
    }, {
      x: 1,
      y: 10
    }, {
      x: 2,
      y: 13
    }, {
      x: 3,
      y: 18
    }, {
      x: 4,
      y: 20
    }, {
      x: 5,
      y: 17
    }, {
      x: 6,
      y: 10
    }, {
      x: 7,
      y: 13
    }, {
      x: 8,
      y: 18
    }, {
      x: 9,
      y: 20
    }, {
      x: 10,
      y: 17
    }, {
      x: 11,
      y: 13
    }, {
      x: 12,
      y: 18
    }, {
      x: 13,
      y: 20
    }, {
      x: 14,
      y: 17
    }, {
      x: 15,
      y: 10
    }, {
      x: 16,
      y: 13
    }, {
      x: 17,
      y: 18
    }, {
      x: 18,
      y: 20
    }, {
      x: 19,
      y: 100
    }];
    (function() {
      var canvas = document.getElementById("wave");
      canvas.style.width = "500px";
      canvas.style.height = "100px";

      //High dpi stuff
      canvas.width = parseInt(canvas.style.width) * 2;
      canvas.height = parseInt(canvas.style.height) * 2;

      //Get canvas context
      var ctx = canvas.getContext("2d");

      //Stroke color
      ctx.strokeStyle = "#ffff00";

      //Draw thicker lines due to high dpi scaling
      ctx.lineWidth = 2;
      var dps = [];
      for (var a = 0; a < 20; a++) {
        dps[a] = dataArray[a];
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (var b = 0; b < 19; b++) {
        var x1 = (canvas.width * b) / 19;
        var x2 = (canvas.width * (b + 1)) / 19;
        ctx.beginPath();
        ctx.moveTo(x1, (1 - (dps[b].y / 100)) * canvas.height);
        ctx.lineTo(x2, (1 - (dps[b + 1].y / 100)) * canvas.height);
        ctx.stroke();
      }
      interval = setInterval(function() {
        updateChart()
      }, 1000);
      c = 0;

      function updateChart() {
        if (c < 50) {
          dps.push({
            x: c,
            y: Math.round(Math.random() * 100)
          });
          c++;
          if (dps.length > 19) {
            dps.shift();
          }
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          for (var b = 0; b < 19; b++) {
            var x1 = (canvas.width * b) / 19;
            var x2 = (canvas.width * (b + 1)) / 19;
            ctx.beginPath();
            ctx.moveTo(x1, (1 - (dps[b].y / 100)) * canvas.height);
            ctx.lineTo(x2, (1 - (dps[b + 1].y / 100)) * canvas.height);
            ctx.stroke();
          }
        }

      }

    })();
  </script>
</body>

</html>