Canvas JavaScript

Draw a Circle

This JavaScript program demonstrates how to draw a circle on a canvas element.

DrawACircle.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="DrawACircle.js"></script>
  </head>
  <body onload="Draw()">
    <canvas id="idCanvas" width="640" height ="480" style="background-color: #F0F0F0;"></canvas>
  </body>
</html>

DrawACircle.js

function Draw() {
	var qCanvas = document.getElementById("idCanvas");
	var qContext2D = qCanvas.getContext("2d");
	var dCx = 200.0;
	var dCy = 150.0;
	var dRadius = 100.0;
	var dArcStart = 0.0;
	var dArcEnd =  2.0*Math.PI;
	var bCounterClockwise = true;
	qContext2D.beginPath();
	qContext2D.arc(dCx, dCy, dRadius, dArcStart, dArcEnd, bCounterClockwise);
	qContext2D.stroke();
}
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.