HTML5 Game - Draw rounded corner rectangle

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Rectangle Methods

Description

Draw rounded corner rectangle

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {/*from   w  w  w .  ja  va 2 s .  co  m*/
            background: #dddddd;
         }

         #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 context = canvas.getContext('2d'); 
let roundedRect = function(x,y,w,h,r) { 
  context.beginPath(); 
  context.moveTo(x,y+r); 
  context.arcTo(x,y,x+w,y,r); 
  context.arcTo(x+w,y,x+w,y+h,r); 
  context.arcTo(x+w,y+h,x,y+h,r); 
  context.arcTo(x,y+h,x,y,r); 
  context.closePath(); 
  context.stroke(); 
}; 
roundedRect(10,65,40,80,10); 
       </script> 

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

Related Topic