The rotate function

Share RGraph:   
[No canvas support]
An example of rotating the canvas before drawing a grid and a rectangle on it

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

Arguments to the function

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.

[No canvas support]

See also:

Comments

Add a new comment...