Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;
                
                context.beginPath();
              // try to change values, notice the circle is not "closed" if
              // you do not draw from 0 to 2*PI, you shoud call "closePath()" after
              //in order to get a closed arc of circle.
                context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
                context.fillStyle = "#8ED6FF";
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = "black";
              // in case you are not drawing a complete circle from 0-2PI,
              // uncomment this to see the difference
              //context.closePath();
              // stroke() ends the path.
                context.stroke();
              
              // Notice we called context.arc() only once ! And drew it twice 
              // with different styles
            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers