HTML5 Game - Drawing Line Art

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

Description

Drawing Line Art

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="200" height="200">
 Your browser does not support the HTML 5 Canvas. 
</canvas>/*from   w w w.j  a v  a2  s .  c o m*/
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');

          // Stroked triangles 
          context.beginPath(); 
          context.strokeStyle = "rgba(200, 0, 0, 0.5)"; 
          context.moveTo(110, 205); 
          context.lineTo(110, 125); 
          context.lineTo(30, 205); 
          context.closePath(); 
          context.stroke(); 


         context.beginPath(); 
         context.moveTo(100, 205); 
         context.lineTo(100, 125); 
         context.lineTo(20, 205); 
         context.closePath(); 
         context.stroke(); 

         context.beginPath(); 
         context.moveTo(90, 205); 
         context.lineTo(90, 125); 
         context.lineTo(10, 205); 
         context.closePath(); 
         context.stroke(); 
  
</script> 

</div>
</body>
</html>

Related Topic