javascript - How to draw number lines using HTML

Question

We have a requirement to draw a number line much similar to what is shown over here. The scope is as follows.

1. Draw lines as specified in the above page (with a range of numbers)
2. Ability to ask for user input (say a number at a certain point or a number which is either before or after a certain number)
3. Provide different colors for the line / the numbers

What kind of abstractions are available which will help us to do this in a simple fashion? (html5 canvas or jquery or javascript or any other framework which can generate HTML code)

Answer 1

Using Canvas Element,

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

  var w = canvas.width = 700;
  var h = canvas.height = 400;
  with(ctx) {
    fillStyle = '#000';
    fillRect(0, 0, w, h);
    fill();
    beginPath();
    lineWidth = 2;
    strokeStyle = '#f00';
    moveTo(w/7, h/2);
    lineTo(6*w/7, h/2);
    stroke();
    for(var i = -10;i <= 10; i++) {
      beginPath();
      strokeStyle = '#0f0';
      lineWidth = 2;
      moveTo(w/2 + i * 20, h/2 - 20);
      lineTo(w/2 + i * 20, h/2 + 20);
      fillStyle = '#ff0';
      fillText(i, (w/2 + i * 20 )- 5, h/2 + 35);
      if(!i) {
        lineWidth = 4;
        strokeStyle = '#f0f';
      }
      fill();
      stroke();
    }
  }
});

see in Action

I guess you can add your own module according to ur requirement :)