Rotating using transform-origin

HTML

<script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script>
<body>
<canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas>

JavaScript

var r;

function init() {
    var c = new Path.Circle(new Point(100, 100), 10);
    c.fillColor = '#ee2a33';
    
    var point = new Point(60, 60);
    var size = new Size(80, 80);
    var rectangle = new Rectangle(point, size);
    r = new Path.Rectangle(rectangle);
    r.strokeColor = '#ee2a33';
    r.strokeWidth = 2;
    r.rotate(20);
}

function onMouseUp(event) {
    main.paperAnimationStopped = !main.paperAnimationStopped;
}

function onFrame(event) {
    if (!main.paperAnimationStopped) {
        r.rotate(3);
    }
}


init();