paths solution

a solution i came up with using a proxy style object and tinkering.

by Darby Rathbone

CSS

* {
    margin:0px;
    padding:0px;
    overflow:hidden;
}
canvas {
    outline:1px black solid;
}

JavaScript

(function() {
  var Point = function(a, b) {
    this.x = a;
    this.y = b;
    this.d = Math.sqrt(a * a + b * b);
  }, drawOver = function(a) {
    var b = this.globalCompositeOperation;
    this.globalCompositeOperation = "source-atop";
    this.save();
    a.bind(this)();
    this.restore();
    this.globalCompositeOperation = b;
  };
  Point.prototype = {
    slopeTo: function(a) {
      return (this.y - a.y) / (this.x - a.x);
    },
    distanceTo: function(a) {
      return Math.sqrt((this.y - a.y) * (this.y - a.y) + (this.x - a.x) * (this.x - a.x));
    },
    distanceByAxis: function(a) {
      return new Point(this.x - a.x, this.y - a.y);
    },
    normalize: function() {
      return new Point(this.x / this.d, this.y / this.d);
    }
  };
  var canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"), can = document.createElement("canvas"), timer, c = can.getContext("2d"), w = 100, controlpoint = 4, h = 100;
  ctx.paths = [ [] ], canvas.height = can.height = window.innerHeight;
  canvas.width = can.width = window.innerWidth;
  document.body.appendChild(canvas);
  Object.getOwnPropertyNames(Object.getPrototypeOf(ctx)).forEach(function(a) {
    "function" == typeof Object.getPrototypeOf(ctx)[a] && (Object.getPrototypeOf(ctx)[a], 
    ctx["_" + a] = Object.getPrototypeOf(ctx)[a], ctx["$" + a] = function() {
      var b = [].slice.call(arguments), c = function() {
        return ctx["_" + a].apply(ctx, b);
      };
      return c.toString = function() {
        return a + "(" + b.join() + ")";
      }, c;
    }, ctx[a] = function() {
      "beginPath" === a && (ctx.paths.push([]), ctx.paths[ctx.paths.length - 1] = []);
      var b = ctx["$" + a].apply(this, arguments);
      return ctx.paths[ctx.paths.length - 1].push(b), b;
    });
  });
  window.addEventListener("resize", function() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      c.drawImage(canvas, 0, 0);
      canvas.height =...