HTML5 Game - Canvas Shape Ring

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Ring

Description

Ring

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {/* w  ww .ja  va 2s  .c  o m*/
            background: #dddddd;
         }// w  w  w  .ja  v a  2s. com

         #canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 20px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='500' height='500'>
      Canvas not supported
    </canvas>

    <script>
let context = document.querySelector('#canvas').getContext('2d');

let circle = function(cx,cy,r,anticlockwise) { 
  context.moveTo(cx+r,cy); 
  context.arc(cx,cy,r,0,Math.PI*2.0,anticlockwise); 
}; 
context.beginPath(); 
context.fillStyle =  'yellow'; 

       circle(200,300,240,0); 
       circle(200,300,120,1); 
       context.fill(); 
       context.stroke(); 
       </script> 

      </script>
  </body>
</html>