path polyfill

by Darby Rathbone

HTML

<script src="http://blackkbot.net/jscon.js"></script>
<script src='http://blackkbot.net/jscon.js'></script>

CSS

html, body {
    overflow-x:hidden;
    overflow-y:hidden;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}


body > canvas {
    position:fixed;
    height:99%;
    width:99%;
    top:0px;
    left:0px;
}

JavaScript

// Code goes here


var canvas = Canvas(500, 500),
    ctx = canvas.c;


//v = new Canvas(500,500);
//document.body.appendChild(v);
document.body.appendChild(canvas);
canvas.style.border = '1px solid black';

function resizer() {


    var size = {
        width: document.body.clientWidth,
        height: document.body.clientHeight
    };

    canvas.width = size.width;

    canvas.height = size.height;
    canvas.drawPath();
    canvas.getContext('2d').stroke();

}
resizer();
canvas.onmousedown = function (e) {
    console.log(e.pageX + "," + e.pageY);
    if (canvas.path.length > 2) {
        //if (canvas.path.length%2 === 0)
        canvas.quadraticCurveTo(e.pageX, e.pageY);
        window.println(e.pageX+" , "+e.pageY);
        //else
           //canvas.lineTo(e.pageX,e.pageY);
    } else canvas.lineTo(e.pageX, e.pageY);
    canvas.drawPath();
    canvas.getContext('2d').stroke();

};

var timer;
window.onresize = function () {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function () {
        resizer();
    }, 100);
};

function Canvas(w, h) {
    var temp = document.createElement('canvas');
    temp.path = [];
    temp.width = w;
    temp.height = h;
    temp.c = temp.getContext('2d');
    temp.beginPath = function () {
        temp.path = [];
        temp.c.beginPath();
    };
    temp.lineTo = function (x, y) {
        var args = Array.prototype.slice.call(arguments);
        temp.path.push({
            action: 'lineTo',
            args: args
        });
        temp.drawPath();
    };
    temp.quadraticCurveTo = function () {
        var args = Array.prototype.slice.call(arguments);
        if (arguments.length < 4) {
            var previous = temp.getPreviousXPoints(4);
            var p = [previous[0], previous[1]];
            previous[2] = previous[0] - previous[2];
            previous[3] = previous[1] - previous[3];
            previous[0] = (p[0]) - (previous[2] * 1.5);
            previous[1] = (p[1]) -...