HTML5 Game - Drawing two lines in a canvas

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Line

Description

Drawing two lines in a canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
     <title>Drawing Lines</title>

      <style> 
         body {/*from   www.j a va  2s .  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='150'>
      Canvas not supported
    </canvas>

    <script>


let context = document.getElementById('canvas').getContext('2d');

context.lineWidth = 1;
context.beginPath();
context.moveTo(50, 10);
context.lineTo(450, 10);
context.stroke();

context.beginPath();
context.moveTo(50.5, 50.5);
context.lineTo(450.5, 50.5);
context.stroke();
      
    </script>
  </body>
</html>

Related Topic