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...