How to draw a dynamic math number line using JS or/and HTML

I need to draw a number line, that can allows to ask an input and draw the point in the line, or move some point over the line.

like this example: http://ift.tt/15MgYJV

i tried to use canvas but i can't get it, because i never used it before.

<canvas id="canvas"></canvas>

here the JS:

 $(function() {
      var canvas = $('canvas')[0];
      var ctx = canvas.getContext('2d');

      var w = canvas.width = 700; 
      var h = canvas.height = 400;
      var x0 = w/2;
      var starti=-10;
      var endi=10;
      var interval = 20; //10 -> 20 ... 15 -> x 
      var step = 2;
      var steps = 5;

      with(ctx) {

        fillStyle = '#FFFFFF';
        fillRect(0, 0, w, h);
        fill();
        beginPath();
        lineWidth = 2;
        strokeStyle = '#000';
        moveTo(w/7, h/2);
        lineTo(6*w/7, h/2);
        stroke();  
        moveTo(w/7, h/2);
        lineTo(w/7+10, h/2+10); //left arrow bottom line
        stroke();
        moveTo(w/7, h/2);
        lineTo(w/7+10, h/2-10); //left arrow top line
        stroke();
        moveTo(6*w/7, h/2);
        lineTo(6*w/7-10, h/2+10); //right arrow bot line
        stroke();
        moveTo(6*w/7, h/2);
        lineTo(6*w/7-10, h/2-10); //right arrow top line
        stroke();

        for(var i = starti;i <= endi; i++) {
          beginPath();
          strokeStyle = '#8C8C8C';
          lineWidth = 2;
          moveTo(w/2 + i * interval, h/2 - 10);
          lineTo(w/2 + i * interval, h/2 + 10);
          fillStyle = '#000';
          fillText(i/10, (w/2 + i * interval )- 5, h/2 + 25);
          if(!i) {

            strokeStyle = '#F25050';
          }
          fill();
          stroke();
        }

      }
      drawOperation(x0,step, steps);
    });

doesn't matter if you know another solution instead of canvas.