HTML5 Canvas Cookbook

Drawing a circle

Although the HTML5 canvas API doesn't support a circle method, we can certainly create one by drawing a fully enclosed arc.

How to do it...

Follow these steps to draw a circle centered on the canvas:

1. Define a 2D canvas context:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");

2. Create a circle using the arc() method, set the color fill using the fillStyle property, and then fill the shape with the fill() 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 ...