JavaScript Projects for Kids

Drawing a circle

To draw a circle in the canvas, you need to add the following code in your <script></script> tags:

<script type="text/javascript">
  var c = document.getElementById("canvasTest");
  var canvasElement = c.getContext("2d");
  canvasElement.beginPath();
  canvasElement.arc(95,50,40,0,2*Math.PI);
  canvasElement.stroke();
</script>

Here, we used canvasElement.beginPath(); to start drawing the circle, canvasElement.arc(95,50,40,0,2*Math.PI); for the shape of the circle, and canvasElement.stroke(); to set the circle visible.

Note

The canvasElement.arc(95,50,40,0,2*Math.PI); statement is similar to canvasElement.arc(x, y, r, sA, eA, ac);,

where x is the starting coordinate from x axis, y is the starting coordinate from y axis, r is the radius of the ...