<canvas id="myCanvas" width="500" height="500"></canvas>
<div class="fillMe"></div>
<style>
#myCanvas {
    border: 1px solid #DDD;
}
</style>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
$(".fillMe").html(stacker);


stacker+= 0.5;
if (stacker > 90) {
stacker = -90;
}

//for (ex = -200; ex < 200; ex+= 0.5) {}

var node0 = [-100, -100, -100];
var node1 = [-100, -100,  100];
var node2 = [-100,  100, -100];
var node3 = [-100,  100,  100];
var node4 = [ 100, -100, -100];
var node5 = [ 100, -100,  100];
var node6 = [ 100,  100, -100];
var node7 = [ 100,  100,  100];
var nodes = [node0, node1, node2, node3, node4, node5, node6, node7];


var edge0  = [0, 1];
var edge1  = [1, 3];
var edge2  = [3, 2];
var edge3  = [2, 0];
var edge4  = [4, 5];
var edge5  = [5, 7];
var edge6  = [7, 6];
var edge7  = [6, 4];
var edge8  = [0, 4];
var edge9  = [1, 5];
var edge10 = [2, 6];
var edge11 = [3, 7];
var edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11];


// Rotate shape around the x y z axis

var rotateX3D = function(theta) {
    var sin_t = Math.sin(theta*(Math.PI/180));
    var cos_t = Math.cos(theta*(Math.PI/180));

    for (var n=0; n<nodes.length; n++) {
        var node = nodes[n];
        var y = node[1];
        var z = node[2];
        node[1] = y * cos_t - z * sin_t;
        node[2] = z * cos_t + y * sin_t;
    }
};

var rotateZ3D = function(theta) {

    var sin_t = Math.sin(theta*(Math.PI/180));
    var cos_t = Math.cos(theta*(Math.PI/180));

    for (var n=0; n<nodes.length; n++) {
        var node = nodes[n];
        var x = node[0];
        var y = node[1];
        node[0] = x * cos_t - y * sin_t;
        node[1] = y * cos_t + x * sin_t;
    }
};


rotateZ3D(stacker);
rotateX3D(stacker);


//ctx.fillRect(node7[0], node7[0], 5, 5);

    // Draw nodes
    ctx.fillStyle = "#000";
    for (var n=0; n<nodes.length; n++) {

        var node = nodes[n];

        ctx.fillRect(250+node[0]-3/2, 250+node[1]-3/2, 3, 3);



}


    // Draw edges

    for (var e=0; e<edges.length; e++) {

        var n0 = edges[e][0];
        var n1 = edges[e][1];
        var node0 = nodes[n0];
        var node1 = nodes[n1];

        ctx.beginPath();
        ctx.moveTo(250+node0[0], 250+node0[1]);
        ctx.lineTo(250+node1[0], 250+node1[1]);
        ctx.stroke();

    }


</script>