HTML5 Canvas: rotate and translate by example

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

So, with the introduction finished, let's probably begin. And let's start with the rotation ...

rotate ()

This function takes the angle in radians as the only argument. All that is drawn after the execution of this method will be rotated at a given angle relative to the origin . Clear? Not? Bad ... Let's consider the situation with a specific example: you need to draw a rectangle of a given size, in given coordinates, and the figure should be rotated around its axis at a predetermined 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? And because: “Everything that is drawn after the execution of this method will be rotated at a given angle relative to the origin of coordinates ”, and according to the condition of the problem it is necessary: ​​“the figure must 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 a bit chaotic, because we all got used to that (0; 0) is in the upper left corner ... So we went to the next paragraph of our article.

translate ()

I hope everyone has already caught up that translate changes the position of the origin point, if not, then I say - translate changes the position of the origin point :) Ie the point around which rotation takes place in this case. I will not torment for a long time - I post the corrected code of 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 are the weird arguments for fillRect? And this is food for your mind :)
Save the script, double click on index.html and ta-da! The result of torment:

')
I hope at least someone article will help 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. Should I write? Who will read?
Continued .