HTML5 Canvas: rotate and translate using an example

Hello dear Habroyuzery! In my debut post, I would like to talk about such a wonderful and interesting thing as HTML5 Canvas, or rather about the context functions, which, in my opinion, are the least covered - transform and rotate.
When I started my experiments and digging in the field of newfangled canvas, there was only one article in Runet that clearly explained how to rotate drawings on canvas. More or less understand the meaning of the mysterious Java Script'a I could only "gut" source Tululoo HTML5 Game Maker.

So, with the introduction finished, let's start. And we will begin, perhaps, with rotation ...

rotate ()

This function takes an angle in radians as the only argument. Everything that is drawn after executing this method will be rotated by a given angle relative to the origin . Clear? Not? Bad ... Let's look at the situation with a specific example: we need to draw a rectangle of a given size, in the given coordinates, and the figure should be rotated around its axis again by a given angle.
Let's start with this code:

function inRad(num) {
	//я ведь говорил, что функция принимает угол в радианах?
	return num * Math.PI / 180;
}
//описываем наш прямоугольник
var rectX = 100, rectY = 100, rectW = 100, rectH = 100, rectAngle = 45;
//получаем канвас и контекст
var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');	
//рисуем «фон»
ctx.fillStyle = '#8080FF';
ctx.fillRect(0, 0, 300, 300);
//самое интересное — крутим контекст и...
ctx.rotate(inRad(45));
//...рисуем наш прямоугольник
ctx.fillStyle = '#804000';
ctx.fillRect(rectX, rectY, rectW, rectH);

Here is the result:

Not quite up to expectations, right? And why? But because: “Everything that is drawn after the implementation of this method will be rotated at a predetermined angle relative to the origin, ” and according to the condition of the task you need: “the figure should be rotated around its axis .” Conclusion - you need to change the point around which the rotation will occur, or rather the point of origin. It sounds somewhat chaotic, because we are all used to the fact that (0; 0) is in the upper left corner ... So we come to the next paragraph of our article.

translate ()

I hope everyone has already caught up with the fact that translate changes the position of the origin point, if not, I say - translate changes the position of the origin point :) That is, the point around which rotation occurs in this case. I will not torment for a long time - I post the corrected code for our task:

function inRad(num) {
	return num * Math.PI / 180;
}
var rectX = 100, rectY = 100, rectW = 100, rectH = 100, rectAngle = 45;
var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');	
ctx.fillStyle = '#8080FF';
ctx.fillRect(0, 0, 300, 300);
ctx.translate(rectX, rectY);
ctx.rotate(inRad(45));
ctx.fillStyle = '#804000';
ctx.fillRect(-rectW/2, -rectH/2, rectW, rectH);

What kind of strange arguments do fillRect have? And this is food for your mind :)
Save the script, double-click on index.html and yes! The result of torment:


I hope at least someone article helps to shed light on this mysterious canvas with all the consequences.
PS: The next lesson (s) intends to devote to creating a normal sprite engine with sorting by depth. Is it worth it to write? Read who will be?
To be continued .