<canvas id="myCanvas" width="500" height="500"></canvas>
<div class="fillMe"></div>

<style>
#myCanvas {
    border: 1px solid #DDD;
}
.input, .input-once {
font-size: 18px;
}

</style>
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


stacker+= 1;
if (stacker > 360) {
stacker = 0;
}


$(".fillMe").html(stacker);

toAng = stacker;

function rotateX(px, py, ang) {
rx = (Math.cos(ang*(Math.PI/180))*px)+(-1*Math.sin(ang*(Math.PI/180))*py);
ry = (Math.sin(ang*(Math.PI/180))*px)+(Math.cos(ang*(Math.PI/180))*py);
return [rx, ry];
}



//x' = x*cos q - y*sin q


function rotateZ(px, py, ang) {
rx = (Math.cos(ang*(Math.PI/180))*px)+(-1*Math.sin(ang*(Math.PI/180))*py);
ry = (Math.sin(ang*(Math.PI/180))*px)+(Math.cos(ang*(Math.PI/180))*py);
return [rx, ry];
}

var tri1= {
a:[50, 0],
b:[100, 100],
c:[0, 100]
};


ctx.fillStyle = "#ff0000";
ctx.fillRect(10,10, 5,5);
//ctx.fillRect(rotateX(10,10)[0], 10, 5, 5);

transOne = 0
transTwo = stacker*0.01*toAng
transThree = 0

ctx.fillStyle = "#ff0000";
sec2x = rotateX(tri1.a[0],  tri1.a[1], transOne)[0];
sec2y = rotateX(tri1.a[0],  tri1.a[1], transTwo)[1];
lec2xy = rotateX(sec2x, sec2y, transThree);

ssec2x = rotateX(tri1.b[0],  tri1.b[1], transOne)[0];
ssec2y = rotateX(tri1.b[0],  tri1.b[1], transTwo )[1];
llec2xy = rotateX(ssec2x, ssec2y, transThree);

sssec2x = rotateX(tri1.c[0],  tri1.c[1], transOne)[0];
sssec2y = rotateX(tri1.c[0],  tri1.c[1], transTwo )[1];
lllec2xy = rotateX(sssec2x, sssec2y, transThree);

ctx.fillRect(200+lec2xy[0],200+lec2xy[1], 4, 4);
ctx.fillStyle = "#00ff00";
ctx.fillRect(200+llec2xy[0],200+llec2xy[1], 4, 4);
ctx.fillStyle = "#0000ff";
ctx.fillRect(200+lllec2xy[0],200+lllec2xy[1], 4, 4);

//ctx.fillRect(100+rotateX(tri1.b[0],  tri1.b[1], toAng)[0], 100+rotateX(tri1.b[0],  tri1.b[1], toAng)[1], 5, 5);
//ctx.fillRect(100+rotateX(tri1.c[0],  tri1.c[1], toAng)[0], 100+rotateX(tri1.c[0],  tri1.c[1], toAng)[1], 5, 5);



/*
ctx.fillStyle = "#0000ff";
ctx.fillRect(tri2.a[0]+200,  tri2.a[1]+200, 5, 5);
ctx.fillRect(tri2.b[0]+200,  tri2.b[1]+200, 5, 5);
ctx.fillRect(tri2.c[0]+200,  tri2.c[1]+200, 5, 5);
*/

</script>