Drawing a circle in canvas

Sunny.Sagar
Posted by Sunny.Sagar under HTML 5 category on | Points: 40 | Views : 1522
<canvas id="myCanvas" width="600" height="400" style="border:1px solid red;">
Canvas is not supported in your browser
</canvas>
<br />
<input type="button" onclick=" DrawCircle()" value="Draw Circle" />


Javascript
<script type="text/javascript">
function DrawCircle() {
var context = document.getElementById("myCanvas").getContext("2d");
context.beginPath();
context.lineWidth = "5";
// arc(x center coordinate, y center coordinate, radius, start angle value,
end angle value, clock wise/anti clock wise=true)
// start and end angles are measured in radios. 360 degree = Mapth.PI * 2
context.arc(400, 250, 100, 0, Math.PI * 1.5, true);
context.stroke(); // mandatory to call
context.beginPath();
context.arc(100, 110, 90, 4, 2, false);
context.stroke(); // mandatory to call again
context.beginPath();
context.arc(350, 150, 90, 1, Math.PI * 1.5, false);
context.fillStyle = "green";
context.globalAlpha = 0.2;
context.fill();
}
</script>

Comments or Responses

Login to post response