1function draw()
2 {
3var canvas = document.getElementById('circle');
4if (canvas.getContext)
5{
6var ctx = canvas.getContext('2d');
7var X = canvas.width / 2;
8var Y = canvas.height / 2;
9var R = 45;
10ctx.beginPath();
11ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
12ctx.lineWidth = 3;
13ctx.strokeStyle = '#FF0000';
14ctx.stroke();
15}
16}
1ctx.beginPath();
2/* ctx.arc(x, y, radius, startAngle, endAngle[, counterclockwise] */
3ctx.arc(20, 50, 10, 0, 2*Math.PI)
4ctx.stroke();
5// or ctx.fill();
1<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=utf-8 />
5 <title>Draw a circle</title>
6 </head>
7 <body onload="draw();">
8 <canvas id="circle" width="150" height="150"></canvas>
9 </body>
10 </html>