JAVASCRIPT GRAPHICS SHELL

JavaScript Shell with Canvas Graphics

Here is a JavaScript interactive shell with a dedicated graphics display. The graphics are implemented using the canvas element and the cvsGraphCtx graphics context. The canvas element is natively supported in all the major browsers, Firefox, Safari, Opera etc. but for those still using Internet Explorer, support for canvas graphics requires the excanvas emulator. The latest official version of excanvas, Rev 3, requires some patches written by Tommy Maintz at ExtJS. His version excanvas-modified.js, allows all the features of cvsGraphCtx to be available in IE6, IE7 and IE8.

Using the JavaScript Shell

Type JavaScript code into the console input textarea and then press the RUN button. The input code can be anything from a simple expression such as 12*2.54 to substantial multi-line blocks of JavaScript code. If the code returns a value (or an error message) it will be displayed in the console output, the single line textarea at the bottom of the console. The output of any graphics commands will be displayed on the graphics panel at the top of the console.

The graphics commands available to the JavaScript shell are documented on the CanvasGraphics page. The JavaScript shell code is executed using eval in the scope of a cvsGraphCtx object, so there is no need to preface each graphics command with a reference to graphics context.

Local variables defined using var are only in scope for the current 'RUN'. So use global variables if multiple 'RUN's are to be used to draw graphics, e.g. if code g=new cvsGraphCtx("cvs1"); is used to setup the graphics context, then 'g' will be available to drawing commands for successive 'RUN' instances.

Try it

Some example code has been already been entered into the input console as a demonstration, click on the RUN button to see the graph drawn.

JavaScript console with cvsGraphCtx methods available.

History Buffer

The console is provided with a history buffer. Each time the RUN button is pressed the JavaScript source text is saved in the buffer. Pressing the BACK button will step backward through the history buffer, each entry is recalled into the input area. Similarly, the FWD button will step forward through the history buffer.

Example with 'Square' pixels

The aspect ratio of the canvas is available as a parameter 'aRatio'. These value is useful when setting world coordinates to create square pixels, i.e. where the X and Y axes have the same scale factor. Here is code that will use the full graphics area, set world coordinates with square pixels and draw a circle, the circle will look round if the X and Y axes have the same scaling.

// reset the viewport to full screen
setViewport();
fillViewport("#eeffee");   // clear to pale green
setWorldCoords(-30*aRatio, 30*aRatio, -30, 30);
setPenColor("black");
drawAxes(0, 0, -25, 25, -25, 25, 5, 5, 10, 10);
setPenColor("#0000ff");  // change to blue pen
move(0, 20);
for (var i=0.2; i<=2*Math.PI+0.2; i+=0.2)
  line(20*Math.sin(i), 20*Math.cos(i));

To test the code,
Press CLR SCN to clear the current graphics display.
Drag your cursor to select this code and paste it into the console input.
Press RUN.

You should see a pale green background with a set of axes and a blue circle.

Another Example

Here is the graphics style used in the Spectrum Analyser page.

h = 100/aRatio;
setViewport(); // reset the viewport to full screen
fillViewport("#303f30");   // very dark
setViewport(12, 6, 85, h-12);  // define data area
setWorldCoords(0, 1200, -10, 10);
setPenColor("#d0d0d0");
drawBoxAxes(0, 1200, -10, 10, 200, 5, "Hz", "dB", "Input");
setPenColor("white");
move(0, 0);
for (var i=1; i<=200; i++)
  line(i*6, 5*Math.sin(i/6));

To test the code,
Press CLR SCN to clear the current graphics display.
Drag your cursor to select this code and paste it into the console input.
Press RUN.

You should see a dark background with box style axes, labeled, and a sine wave plotted.