Javascript – how to generate circle using javascript

2ddrawinggeometryjavascript

How can i create a Circle in Html using javascript. Does it can be done using Javascript or not? I have done creating rectangles and squares but don't know how to accomplish a circle.

Best Solution

Here's a simple way to do a circle for modern browsers:

<div style='border: 3px solid red; border-radius: 50px; width: 100px; height: 100px;'>
</div>

Demo.

edit — It works better with the "box-sizing" ("-moz-box-sizing" for Firefox) set to "border-box".

<style>
  div.circle {
    border: 3px solid red;
    border-radius: 50%;
    width: 100px; height: 100px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>

<div class=circle>
</div>