HTML5 Game - Canvas Line Caps

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

Description

Line Caps

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { /*from w ww  .j a v  a  2 s .co  m*/
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200">Did You Know: Every time 
        you use a browser that doesn't support HTML5
      </canvas> 
      <script> 

let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
myContext.lineWidth = 20;  

let arrEndings = ['round', 'square', 'butt']; 
let i = 0, arrEndingsLength = arrEndings.length; 
  
for (i = 0; i < arrEndingsLength; i++){ 
  myContext.lineCap = arrEndings[i]; 
  myContext.beginPath(); 
  myContext.moveTo(50 + (i * 50), 35); 
  myContext.lineTo(50 + (i * 50), 170); 
  myContext.stroke(); 
} 
      </script> 
    </body> 
</html>

Related Topics