19 October 2010

Drawing a circle in canvas tag with arc function is actually really simple, but you have to have a browser that supports HTML5.


Create a html file and put a canvas tag in it. Give it a size and we are off to write some JavaScript to make the circle.
Source code viewer
  1. <canvas id="canvas_circle" width="250" height="250"></canvas>
Programming Language: XML


Of course you have to put JavaScript in script tag. But this example code draws the circle.
Source code viewer
  1. var canvas_circle = document.getElementById("canvas_circle").getContext("2d");
  3. //start drawing
  4. canvas_circle.beginPath();
  5. //draw arc: arc(x, y, radius, startAngle, endAngle, anticlockwise)
  6. canvas_circle.arc(70, 70, 15, Math.PI*2, 0, true);
  7. //end drawing
  8. canvas_circle.closePath();
  9. //fill it so you could see it
  10. canvas_circle.fill();
Programming Language: Javascript
If you play with the parameters you can see how the circle changes.