1var canvas = document.getElementById("canvas");
2var ctx = canvas.getContext("2d");
3ctx.arc(x, y, radius, 0, Math.PI * 2);
4ctx.fillStyle = "red";
5ctx.fill();
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}
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>