Canvas reference: The rotate() function

Summary: The rotate() function can be used to rotate the canvas coordinate system

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>
    window.onload = function ()
    {
        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>

Also here's a chart that has had the canvas rotated before being drawn. The canvas was translated before doing the rotate so instead of being rotated about the top left corner it's rotated about the bottom right corner and because of the rotation ends up being displayed upside down and back-to-front.