rotate and scale operations

The order of the factors change the product.

by Gonzalo Chumillas

HTML

<script src="http://www.soloproyectos.com/resources/paper-full.min.js"></script>
<div id="text">&nbsp;</div>
<canvas id="canvas" width="640" height="480"></canvas>
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s)[2].innerHTML.split(n);d.write('<'+s+' type="text/paperscript" canvas="' + document.getElementsByTagName('canvas')[0].id + '">'+b.slice(2,b.length-2).join(n)+'</'+s+'>')})()</script>

JavaScript

// The blue rectangle is distorted
var rec = new Path.Rectangle({
    point: [100, 50],
    size: [100, 100],
    strokeColor: 'blue'
});
rec.rotate(23);
rec.scale(1.5, 1);

// The red rectangle maintains its properties 
var rec = new Path.Rectangle({
    point: [350, 50],
    size: [100, 100],
    strokeColor: 'red'
});
rec.scale(1.5, 1);
rec.rotate(23);