Displaying the Circle

Ok, now that you know all about the arc function and how you can mentally draw your circle, it’s time to draw it for realz. Let’s say that that you have some starting code that looks as follows:

Press + to interact
var mainCanvas = document.getElementById("myCanvas");
var mainContext = mainCanvas.getContext("2d");
 
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
 
function draw() {
 
}
draw();

This code just takes care of just getting your canvas (whose id value is myCanvas) prepped for drawing content. There is nothing fancy going on here, so let’s fix that. Modify your draw function by adding the following code:

  • HTML
  • JavaScript
javascript
We’ve already seen this weird semi-circle in the previous section, it is nice to see it being drawn from actual code as opposed to just plain English words. Before we wrap things up, let’s end (ironically) by looking at the code for how to draw a full circle:


  • HTML
  • JavaScript
javascript
You can tell by looking at the arguments we passed in to the arc method for why that is. The startAngle value is 0, and the endAngle value is 2ᴨ. We don’t leave any room for any spoiled radians to go off and do something crazy.