# Rotating -Canvas Transformation method

In the previous post, we discussed the canvas `translation`

method and now in this post, we will discuss another transformation method rotate. Using the rotate method we can rotate the canvas element around the origin.

### Rotate

This method takes an angle as the parameter and the canvas element is rotated about this angle. This is shown in the figure below.

The rotation point is the origin of the canvas. In order to change the center point, we have to use the translate method.

### A rotate example

In the below example we can use the rotate method to draw shapes around a circular pattern. We can also calculate the individual x and y coordinate. When we calculate co-ordinates we can alter the center position of the circle but not the circle themselves

We use two loops here the 1st one is used to specify the number of rings and the second one is used to determine the dots that have to be drawn in each pixel. Before drawing each circle the states are saved and the canvas coordinates are rotated by an angle that is specified by the total number of dots in the rings. The inner circle has 6 dots and in each and every step the angle is rotated by 360/6=60 degrees. With each new ring the total number of dots in the circle is doubled and the angle turn is reduced to half

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.translate(75,75); for (var i=1;i<6;i++){ // Loop through rings (from inside to out) ctx.save(); ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; for (var j=0;j<i*6;j++){ // draw individual dots ctx.rotate(Math.PI*2/(i*6)); ctx.beginPath(); ctx.arc(0,i*12.5,5,0,Math.PI*2,true); ctx.fill(); } ctx.restore(); } } |