Although the HTML5 canvas API doesn't support a circle method, we can certainly create one by drawing a fully enclosed arc.
Follow these steps to draw a circle centered on the canvas:
Define a 2D canvas context:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
Create a circle using the
arc()
method, set the color fill using thefillStyle
property, and then fill the shape with thefill()
method:context.arc(canvas.width / 2, canvas.height / 2, 70, 0, 2 * Math.PI, false); context.fillStyle = "#8ED6FF"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); };
Embed the canvas tag inside the body of the HTML document:
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> </canvas>
As you might recall from Chapter 1, we can create an arc using the arc()
method which draws a section of...