# The rotate function

The `rotate` function rotates the `canvas`. There are a couple of things you need to keep in mind if you use this function:

• The `canvas` is always rotated about the [0,0] coordinate so if you want to `rotate` around another coordinate (the center for example) you need to `translate`, do the `rotate`, and then `translate` back, like the example below. Or in the case of the example below you can `translate` to the bottom right corner and do the `rotate`.
• The angle (which is the argument that you give it) is measured in `radians` - not `degrees`. 1 `radian` is equal to (approximately) 57.30 `degrees`. So 1 `degree` is equal to `Math.PI / 180` `radians`. `Math.PI` is a constant that you can use in `javascript`.

## Arguments to the function

• The angle to rotate the `canvas` (measured in `radians` - not `degrees`)

## An example

You can use the function like this:

```<script>
{
var canvas  = document.getElementById("cvs");
var context = canvas.getContext('2d');

// First translate the canvas so that the rotation point is at the bottom right of the canvas
context.translate(canvas.width, canvas.height)

// Pi radians - which is 180 degrees
context.rotate(Math.PI);

context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.stroke();
}
</script>
```