<canvas id="canvas" width="350" height="350"> <p>Fallback content for browsers that don't support the canvas tag.</p> </canvas> <script> var c = document.getElementById("canvas"); var ctxCircle = c.getContext("2d"); ctxCircle.beginPath(); ctxCircle.arc(120,100,70,0*Math.PI,2*Math.PI); ctxCircle.fillStyle="GreenYellow"; ctxCircle.fill(); ctxCircle.strokeStyle="ForestGreen"; ctxCircle.stroke(); </script>
The above example demonstrates how to draw a circle using the HTML
The circle is defined with the following line:
Here's an explanation of those values:
0is at the 3 o'clock position.
2indicates that it's a full circle (less than 2 would be a partial circle)
We also use
fill() to fill the circle with a color, and the
stroke() to draw a stroke around the outside of the circle.