HTML5 Game - Canvas Draw Bar

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Drawing Using Paths

Description

Draw Bar

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {//from www.  j a  v a 2 s.  c o 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 drawBars = function(bars) { 
        context.clearRect(0,0,canvas.width,canvas.height); 
        for (let i=0; i<bars; i++) { 
          let yOff = i*(canvas.height/bars); 
          let w = Math.random()*canvas.width; 
          let h = canvas.height/bars*0.8; 
          context.fillRect(0,yOff,w,h); 
          context.strokeRect(0,yOff,w,h); 
        } 
       }; 
       drawBars(10); 
       </script> 

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

Related Topic