Canvas How to - Grow to a circle

Question

We would like to know how to grow to a circle.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript'>//<![CDATA[ 
var angle = 0.0;
var increment = 0.1;
function incrementAngle() {<!--  w  ww  .j  a va 2  s.c o m-->
    angle += increment;
    if (angle > Math.PI * 2) 
       angle -= (Math.PI * 2);
}
function update() {
    incrementAngle();
    var ctx = $('#canvas')[0].getContext("2d");
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.arc(20, 20, 15, angle, angle + Math.PI, true);
    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.closePath();
}
function init() {
    update();
    setInterval(update, 1000);
}
$(document).ready(function() {
    init();
});
//]]>  
</script>
</head>
<body>
  <canvas id="canvas" width="800px" height="100px"></canvas>
</body>
</html>

The code above is rendered as follows: