HTML5 Canvas Experiment

After having completed the simple html/css/javascript synthesizer application (described in Part1, Part2, Part3, Part4) I wanted to evaluate using an HTML5 canvas for an instrumentation like display.  There are lots of good graphic packages available, however, I did not find one that seemed to offer basic and simple xy plots suitable for what I wanted to do with a browser based instrument.  For me the real keys were: a) simplicity where I could understand the code and tailor it, b) ability to graph 500 – 2k work of xy points every 50mS or so, c) basic measurement things like envelopes, memories, peak picking, a cursor, and markers.  Given this and the desire to spend a little more time advancing my javascript comfort level with non-trivial examples I decided to build a simple version of a similar Java display I have used (illustrated in the posts on ADC and spectrum analyzer experiments).

The package was developed as a standalone file with a couple of test drivers.  The tests themselves run in the browser and require no back end server to drive them.  The source code is at BREC/Js and a browser executable demo is here.  An image of one of the unit tests is below.

Example of HTML Canvas used to graph signals.  Browser demo available here.

The example has several buttons along the bottom.  The "run" button causes internal updates to the XY sequence displayed.  In the default case this is just a sinusoid with a up and down chirping frequency.

The "marker" button displays 10 markers.  These start out as predefined values on a sinusoid.  If you click anywhere on the canvas, marker 9 moves to that position.

The "peaks" button toggles peak picking.  When peak picking is on, markers 0 - 8 are taken over and assigned automatically to peaks found.  Marker 9 still follows the last canvas clicked location.

The "memshow" button toggles the display of a XY sequence in memory.  This is shown in light blue. The "mem" button captures the currently displayed sequence into the memory.

The "envelope" button toggles an envelope history.  When enabled the envelope is initialized and displayed.  When toggled off the envelope is hidden and not active.

The "function" button toggles between two internally generated XY series.  The first is the chirped sinusoid, the second is a spectrum like signal with two peaks and some random noise.