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>
            var canvas, ctx; 
            window.onload = function(){
                canvas = document.getElementById("myCanvas");
                ctx = canvas.getContext("2d");
              
                var centerX = canvas.width / 2;
                var centerY = canvas.height / 2;
                var radius = 70;
                
                ctx.beginPath();
              
                // Add to the path a full circle (from 0 to 2PI)
                ctx.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
              
                // save the context before setting shadows and drawing the filled circle
                ctx.save();
              
                // With path drawing you can change the context
                // properties until a call to stroke() or fill() is performed
                ctx.fillStyle = "lightBlue";
              
                // add shadows before drawing the filled circle
                addShadows();
              
                // Draws the filled circle in light blue
                ctx.fill();
              
                // restore the context to its previous saved state
                ctx.restore();
              
                // Prepare for the outline
                ctx.lineWidth = 5;
                ctx.strokeStyle = "black";
             
                // draws AGAIN the path (the circle), this
                // time in wireframe
                ctx.stroke();
              
              // Notice we called context.arc() only once ! And drew it twice 
              // with different styles
            };
          
          function addShadows() {
            ctx.shadowColor = "Grey";    // color
            ctx.shadowBlur = 20;         // blur level
            ctx.shadowOffsetX = 15;      // horizontal offset
            ctx.shadowOffsetY = 15;      // vertical offset
          }
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>
​
Output 300px

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

Dismiss x
public
Bin info
micbuffapro
0viewers