1<canvas id="canvas"></canvas>
2<script>
3
4 var canvas = document.getElementById('canvas');
5 var ctx = canvas.getContext('2d');
6
7 ctx.beginPath();
8 ctx.rect(x, y, width, height);
9 ctx.fillStyle = 'limegreen';
10 ctx.fill();
11
12 ctx.beginPath();
13 ctx.arc(x, y, radius, startAngle, endAngle, counterClockWise(optional));
14 ctx.strokeStyle = 'black';
15 ctx.stroke();
16
17</script>
1//Creates a canvas and draws a circle
2var canvas = document.body.appendChild(document.createElement("canvas"));
3var ctx = canvas.getContext("2d");
4
5ctx.beginPath();
6ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, Math.PI * 2);
7ctx.fillStyle = "red";
8ctx.strokeStyle = "black";
9ctx.stroke();
10ctx.fill();
1#this code creates a circle within a canvas that must be created in HTML
2var c = document.getElementById("myCanvas");
3var ctx = c.getContext("2d");
4ctx.beginPath();
5ctx.arc(95, 50, 40, 0, 2 * Math.PI);
6ctx.stroke();
1<!DOCTYPE HTML>
2
3<html>
4 <head>
5
6 <style>
7 #mycanvas{border:1px solid red;}
8 </style>
9 </head>
10
11 <body>
12 <canvas id = "mycanvas" width = "100" height = "100"></canvas>
13 </body>
14</html>