logs

easyCanvas.js

easyCanvas.js is meant to be a small wrapper on top of html5 canvas. Its main benefit is that it exposes the underlying canvas context so you can be creative with your visualizations. It has a few functions for making simple plots, but for a more convenient (but less extensible) solution, check out chart.js.

  1. DPI adjusts when the window is resized or if CSS changes.
  2. By setting "xmin", "xmax", "ymin", and "ymax", the coordinate system of your canvas is easily customized.
  3. Animation is automatic and the screen is cleared between frames.
  4. Contains functions for creating common types of plots (line,bar,etc.)
  5. Contains tools which can be enabled for zooming/selection.

Here's an example of a standard line plot along with the code that produced it:

Here's the HTML: 
<easy-canvas id="example1"></easy-canvas>
and here's the javascript:

Here's an example of a standard bar plot along with the code that produced it:

Here's the HTML: 
<easy-canvas id="example2"></easy-canvas>
and here's the javascript: