Вращение вокруг произвольной точки: холст HTML5

Приходите посмотреть удивительный исчезающий прямоугольник!

Но серьезно у меня есть действительно простой HTML5-холст, который просто рисует прямоугольник (используя для этого по умолчанию строку lineTo вместо ).

Моя проблема: Я пытаюсь повернуть прямоугольник на 90 градусов. Прямоугольник должен поворачиваться на 90 градусов, но вместо этого он исчезает.

В моем проекте webapp я получаю странные ошибки размещения x, y, когда я вращаю свои сложные многоугольники в холсте HTML5, поэтому я создал этот простой HTML для проверки вращения и обеспечения его вращения вокруг своей x, y точки 100 100. Но даже это имеет странные результаты, когда я пытаюсь повернуть фигуру.

Может ли кто-нибудь сказать мне, как получить мой прямоугольник, и как я могу вращать свои полигоны вокруг определенной точки, не изменяя при этом значения x, y.

Кто-нибудь сталкивался с этой проблемой с холстом HTML5 и знал, как это исправить?

<canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;">

</canvas>
<script type="text/javascript">

    var canvas = document.getElementById("testCanvas");
    var dc     = canvas.getContext("2d");

    dc.clearRect(0, 0, canvas.width, canvas.height);

    dc.save();
    dc.fillStyle = "#FF0000";

    dc.rotate( 90*Math.PI/180 );  // rotate 90 degrees
    dc.beginPath();
    dc.moveTo(100, 100);
    dc.lineTo(200, 100);
    dc.lineTo(200,300);
    dc.lineTo(100,300);
    dc.closePath();
    dc.fill();

    dc.restore();
-->
</script>

Ответы

var canvas = document.getElementById("testCanvas");
var dc     = canvas.getContext("2d");
var angle = 0;
window.setInterval(function(){
    angle = (angle + 1) % 360;
    dc.clearRect(0, 0, canvas.width, canvas.height);

    dc.save();
    dc.fillStyle = "#FF0000";

    dc.translate(150,200); // First translate the context to the center you wish to rotate around.
    dc.rotate( angle*Math.PI/180 ); // Then do the actual rotation.
    dc.translate(-150,-200); // Then translate the context back.

    dc.beginPath();
    dc.moveTo(100, 100);
    dc.lineTo(200, 100);
    dc.lineTo(200,300);
    dc.lineTo(100,300);
    dc.closePath();
    dc.fill();

    dc.restore();
}, 5);