HTML5 Game - Canvas Shape Stick Figure

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Stick Figure

Description

Stick Figure

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {/*from w  w w.  ja  v  a 2  s.  com*/
            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');

context.strokeStyle = 'red'; 
context.lineWidth = 2; 
context.beginPath(); 
context.arc(200, 140, 20, 0, Math.PI * 2); 
context.moveTo(200, 160); 
context.lineTo(200, 220); 
context.moveTo(180, 300); 
context.lineTo(185, 260); 
context.lineTo(200, 220); 
context.lineTo(215, 260); 
context.lineTo(220, 300); 
context.moveTo(240, 130); 
context.lineTo(225, 170); 
context.lineTo(200, 170); 
context.lineTo(175, 180); 
context.lineTo(170, 220); 
context.stroke(); 



       </script> 

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