Canvas2Dw3D = function(object, width, height)  {
    this.object = object;
    this.numberOfPoints = this.object.length;
    this.width = width;
    this.height = height;
    this.origo2D = [this.width / 2, this.height / 2];

    this.element = document.createElement("canvas");
    this.element.width = this.width;
    this.element.height = this.height;
    this.context = this.element.getContext("2d");
    this.context.strokeStyle = "rgb(0, 255, 0)"; 

    this.parentElement = null;

    this.drawObject();
}

Canvas2Dw3D.prototype.drawObject = function() {
    var c, p, q;
    for (c in this.object) {
        p = this.object[c];
        q = this.object[(c+1)%this.numberOfPoints];
        this.drawLine([p[0], p[1]], [q[0], q[1]]);
    }
}

Canvas2Dw3D.prototype.drawLine = function(xy1, xy2) {
    with (this.context) {
        beginPath();
        moveTo(-xy1[0]+this.origo2D[0], -xy1[1]+this.origo2D[1]);
        lineTo(-xy2[0]+this.origo2D[0], -xy2[1]+this.origo2D[1]);
        stroke();
    }
}

Canvas2Dw3D.prototype.setParentElement = function(obj) {
    obj.appendChild(this.element);
    this.parentElement = obj;
}

HTMLElement.prototype.appendCanvas2Dw3DChild = function(obj) {
    obj.setParentElement(this);
}