Drawing circles
Again, there is no direct function to draw a circle. It should be drawn using the function for drawing an arc. We saw a drawing of a circle in the previous chapter through the example of drawing arc2. The output of the circle recipe looks like this:
How to do it…
The recipe is very simple. It calls the drawCircle() function in a loop to draw multiple circles as you see here. The recipe is as follows.
The HTML code:
<html> <head> <title>circles</title> <script src="circles.js"></script> </head> <body onload="init()"> <canvas id="MyCanvasArea" width="300" height="300" style="border:2px solid blue;" > your browser does not support canvas </canvas> <h1>Circles</h1> </body> </html>
The JavaScript code:
function init(){
var can=document.getElementById("MyCanvasArea");
var ctx=can.getContext("2d");
//call to the function to draw Circle
for(i=1,x=15,y=20,r=10;i<=6;i++,x+=r*2,y+=r*2,r=r+10...
