HTML and CSS Reference
In-Depth Information
Now if you open up the advert.html file in your web browser, you should see a line between the two lines of
text, as shown in Figure 14-5.
Figure 14-5 Drawing lines onto a canvas.
Drawing Circles
The Canvas API only provides native functions for creating rectangular shapes. To create circles, you actually need
to create a circular path that you can then stroke and/or fill, depending on your requirements. To create a circular
path, use the arc() function:
The arc() function takes five parameters. The x and y parameters specify the position of the circle's center. The
radius parameter explains itself. The startAngle and endAngle parameters are used to specify the start and
endpoint of the arc. These values should be given in radians, not degrees. The anticlockwise parameter takes a
Boolean value that specifies whether the arc should be drawn anticlockwise ( true ) or clockwise ( false ).
To convert degrees to radians in JavaScript, use the following statement:
var radians = (Math.PI / 180) * degrees;
As you are creating a path, you need to make sure that you call the beginPath() function before you draw your
arc. Here is a small example of how you might draw a circle using the arc() function (this assumes that you have
already set up the canvas and a 2D drawing context):
ctx.arc(50, 50, 50, 0, Math.PI*2, true);
This code would draw a circle like the one shown in Figure 14-6.
Search WWH ::

Custom Search