var cv = document.getElementById('cv');

var ctx = cv.getContext('2d');

​

var dimension = {

    x: 60,

    y: 40

};

​

​

function drawTank(x, y, rot) {

​

    var cosrot = Math.cos(rot);

    var sinrot = Math.sin(rot);

​

​

    var h1 = cosrot * dimension.x,

        h2 = sinrot * dimension.x,

        h3 = cosrot * dimension.y,

        h4 = sinrot * dimension.y;

​

    v = [{

        x: h1 - h4,

        y: h2 + h3

    },

​

    {

        x: h1 + h4,

        y: h2 - h3

    },

​

    {

        x: -h1 + h4,

        y: -h2 - h3

    },

​

    {

        x: -h1 - h4,

        y: -h2 + h3

    }];

​

    ctx.save();

    ctx.translate(x, y);

    ctx.beginPath();

    ctx.moveTo(v[0].x, v[0].y);

    ctx.lineTo(v[1].x, v[1].y);

    ctx.lineTo(v[2].x, v[2].y);

    ctx.lineTo(v[3].x, v[3].y);

    ctx.lineTo(v[0].x, v[0].y);

    ctx.stroke();

    ctx.restore();

}

​

var currRot = 0;

​

function animate() {

    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, 300, 300);

    drawTank(150, 150, currRot);

    currRot += 0.01;

}

​

animate();