HTML5 Canvas function to rotate object
<p>I am currently in the process of doing some translations on an aeroplane I have created on HTML5/JavaScript.
I have a matrix class, a class for my aeroplane and a main class.
So far I have gotten my scale and translate to work however I am struggling to get the rotate to work.</p>

<p>Here is the code in the matrix class which creates the rotation:</p>

<pre><code>     Matrix.createRotation = function (rotation) {
    return new Matrix(Math.cos(rotation), -Math.sin(rotation), 0,
                      Math.sin(rotation), Math.cos(rotation), 0,
                      0, 0, 1);
};
</code></pre>

<p>and the Transform in the matrix class:</p>

<pre><code> Matrix.prototype.transform = function (pContext) {
    pContext.transform(this.getElement(0, 0), this.getElement(1, 0), this.getElement(0, 1),
    this.getElement(1, 1), this.getElement(0, 2), this.getElement(1, 2));
};
</code></pre>

<p>I know there is nothing wrong with them because it passed there unit test.</p>

<p>Here is the method used to rotate the object </p>

<pre><code> function rotate() {
    var matrix = Matrix.createRotation(Math.PI);
    matrix.setTransform(mainContext);
};
</code></pre>

<p>And here is where I call it:</p>

<pre><code>  initialiseCanvasContext();
scale(new Vector(1, 1));
drawPlane(new Vector(0, 0));
rotate();
</code></pre>

<p>Sorry if this is confusing, please let me know if it is.</p>