Question: AS in subject. I want to rotate a object but i don't want it to move it anywhere, just rotate it and leave it in place. Function draw just draws te rectangle.

```
    <!DOCTYPE html>
    <html>
        <head>
            <script>
            var ctx, canvas;

                window.onload = function(){
                    canvas = document.getElementById('myCanvas');
                    ctx = canvas.getContext('2d');
                    //sciana

                        draw();

                }
            function draw() {
                    //ctx.scale(0.5,0.5);
                    ctx.rotate(Math.PI /6);//here I rotate but it moves...
                    ctx.fillRect( 100, 100, 50, 50);

                    }

            </script>
        </head>
        <body>
            <canvas id="myCanvas" width="600" height="600" style="background-color:#D0D0D0">
                Twoja przeglądarka nie obsługuje elementu Canvas.
            </canvas>
        </body>
    </html>

```

Answer: 
```
Draw - with shape centered at 0,0
Rotate
Translate - to cx,cy , where cx,cy is the center of the shape, where it is to be located.

```

In order to achieve this effect, you must make the function calls on the 2D Context in the exact opposite order, like this:

```
context.translate(cx, cy);
context.rotate   (radians);
context.fillRect (x, y, width, height);

```
The rotate function on the canvas rotates around the origin, in order to rotate around the center of a shape you need to translate to the center of the shape you are about to draw, then rotate, then draw the shape.

Your final code might look something like this:

```
<!DOCTYPE html>
<html>
    <head>
        <script>
        var ctx, canvas;

            window.onload = function(){
                canvas = document.getElementById('myCanvas');
                ctx = canvas.getContext('2d');
                //sciana

                draw();

            }
            function draw() {
            //ctx.scale(0.5,0.5);
                ctx.translate(125, 125);
                ctx.rotate(Math.PI /6);//here I rotate but it moves...
                ctx.fillRect(-25, -25, 50, 50);

            }

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="600" style="background-color:#D0D0D0">
            Twoja przegladarka nie obsluguje elementu Canvas.
        </canvas>
    </body>
</html>

```