var canvas = document.getElementById('scene');

​

// Then you can render to it with this bit of code:

streamlines({

  // As usual, define your vector field:

  vectorField(p) { return {x: -p.y, y: Math.sin(p.x)}; },

​

  // And print the output to this canvas:

  onPointAdded: renderTo(canvas)

}).run();

​

function renderTo(canvas) {

  if (!canvas) throw new Error('Canvas is required');

​

  var ctx = canvas.getContext('2d');

  var width = canvas.width;

  var height = canvas.height;

​

  return onPointAdded;

​

  function onPointAdded(a, b, config) {

    ctx.beginPath();

    var midV = config.vectorField({

      x: (b.x + a.x) * 0.5,

      y: (b.y + a.y) *0.5

    })

    var angle = (Math.atan2(midV.y, midV.x) + Math.PI)/(2*Math.PI);

​

    ctx.strokeStyle = 'hsl(' + Math.round(angle * 360) + ', 100%, 50%)';

    a = transform(a, config.boundingBox);

    b = transform(b, config.boundingBox);

    ctx.moveTo(a.x, a.y);

    ctx.lineTo(b.x, b.y);

    ctx.stroke();

    ctx.closePath();

  }

​

  function transform(pt, boundingBox) {

    var tx = (pt.x - boundingBox.left)/boundingBox.width;

    var ty = (pt.y - boundingBox.top)/boundingBox.height;

    return {

      x: tx * width,

      y: (1 - ty) * height

    }

  }

}