LNum example

LNum.js is a simple javascript class to display integers or natural numbers on a number line. The line will be drawn on a html5 canvas element and can be read as a string containing a base64-encoded image URL. That's it - no buzz or glitz, no cookies or analytics - the only thing needed is vanilla javascript.

I created the class because I often need a simple and fast way to create a dynamic representation of integers for a basic maths lecture.

Default behaviour

By Default, LNum.js will plot a number line representing an interval [a, b] in gray. Tick marks on the line are automatically spaced in a more or less reasonable way. Integer numbers in [a,b] can easily be drawn on the line:

var cnv = document.getElementById('canvas');
line = new LNum( -10, 10, cnv );     
line.display();
line.drawN( 5 );
line.drawN( -5 );

Options

The appearance of the line can be controlled using javascript options: here's a more complex example showing an interval of [-30,50] in black using a serif font with tick spacing set to 15. Some negative numbers starting from -29 to -1 are plotted in red, natural numbers in green and a very special value is shown large in blue (yes, that's ugly).

Below is a copy of the canvas im an -tag
(a base-64 encoded PNG image) - this one can easily
be copied or saved.

var cnv2 = document.getElementById('canvas2');
line2 = new LNum( -30, 50, cnv2 );
line2.display({ 
        color:"#000", 
        fontFamily: "serif", 
        tickSpacing:15 
});
for (n=-29; n<49; n+=3) {
        n<0?mycol="#F00":mycol="#0B0";        
        line2.drawN( n , {
                fontSize:10,
                color:mycol 
        });
}
line2.drawN(0 , {
        fontSize:24,
        color:"#00F",
        ticklen:25
});