# Rotating a Circle Using Canvas in HTML5

Rotating Circle Animation in HTML5

Step 1

The first step is to define the parameters of the circle. Keep in mind that the preceding circle is not one single arc drawn as a circle, but 10 sectors drawn around the centre to make a circle. So each sector will subtend an angle of 36 degrees.

var centreX = 100; var centreY = 100;

var rotateAngle = 36 * Math.PI / 180;

var startAngle = 0 * Math.PI / 180;

var endAngle = 36 * Math.PI / 180;

Step 2

We create an array of colors to fill each sector of a circle.

var colors = ["teal", "red", "green", "blue", "yellow", "violet", "orange", "grey", "navy blue", "purple"];

Step 3

Since 10 sectors make up the circle, we will draw them using a "for loop". Before drawing each sector, we will:

1. Rotate the canvas about the centre of the circle.
2. Assign a color for the sector from the array "colors".

function drawWheel() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

for (i = 0; i < 10; i++) {

ctx.fillStyle = colours[i];

ctx.translate(centreX, centreY);

ctx.rotate(rotateAngle);

ctx.translate(-centreX, -centreY);

ctx.beginPath();

ctx.moveTo(centreX, centreY);

ctx.arc(centreX, centreY, radius, startAngle, endAngle, false);

ctx.closePath();

ctx.fill();

}

}

}

Step 4

To rotate the circle we first define a rotating angle, using the following:

var rotateAngle = 36 * Math.PI / 180;

Step 5

Rotate the canvas about the centre of the circle.

ctx.translate(centreX,centreY);
ctx.rotate(rotateAngle);
ctx.translate(-centreX,-centreY);

Step 6

Draw the circle again, with the rotated canvas.

drawWheel();

Step 7

A counter keeps track of the number of times the canvas is rotated. When the number of rotations desired is done, stop the animation using the clearInterval() method.

counter++;

if (counter > rnd) {

counter = 0;

clearInterval(animFlag);

}

Step 8

Draw the "Rotate" button. Use the addEventListener() method to detect a mouse click. If the mouse is clicked inside the "Rotate" button, then call the rotateWheel() function.

function mouseClick(event) {

var x = event.clientX;

var y = event.clientY;

var rnd = Math.ceil(Math.random() * 100);

if ((x > 200) && (x < 275) && (y > 100) && (y < 120))

animFlag = setInterval(function () { rotateWheel(rnd) }, 25);

}

Example

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<script type="application/javascript">

var centreX = 100; var centreY = 100;

var rotateAngle = 36 * Math.PI / 180;

var startAngle = 0 * Math.PI / 180;

var endAngle = 36 * Math.PI / 180;

var counter = 0;

var animFlag;

var colours = ["teal", "red", "green", "blue", "yellow", "violet", "orange", "grey", "navy blue", "purple"];

function init() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

ctx.lineWidth = 3.0;

ctx.fillStyle = "orange";

ctx.fillRect(200, 100, 75, 20);

ctx.fillStyle = "black";

ctx.font = "15px verdana";

ctx.fillText("Rotate", 215, 114);

drawWheel();

}

}

function drawWheel() {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

for (i = 0; i < 10; i++) {

ctx.fillStyle = colours[i];

ctx.translate(centreX, centreY);

ctx.rotate(rotateAngle);

ctx.translate(-centreX, -centreY);

ctx.beginPath();

ctx.moveTo(centreX, centreY);

ctx.arc(centreX, centreY, radius, startAngle, endAngle, false);

ctx.closePath();

ctx.fill();

}

}

}

function rotateWheel(rnd) {

var canvas = document.getElementById("canvas");

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

ctx.translate(centreX, centreY);

ctx.rotate(rotateAngle);

ctx.translate(-centreX, -centreY);

drawWheel();

counter++;

if (counter > rnd) {

counter = 0;

clearInterval(animFlag);

}

}

}

function mouseClick(event) {

var x = event.clientX;

var y = event.clientY;

var rnd = Math.ceil(Math.random() * 100);

if ((x > 200) && (x < 275) && (y > 100) && (y < 120))

animFlag = setInterval(function () { rotateWheel(rnd) }, 25);

}

</script>

<title>Animation - Moving Banner</title>

<canvas id="canvas" width="600" height="500"></canvas>

<br>

</body>

</html>

Output

Up Next