HTML5 Game - Illustrates the various values of the lineJoin property.

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

Description

Illustrates the various values of the lineJoin property.

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { /*  www  .  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> 
// Get the context we will be using for drawing. 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
myContext.lineWidth = 20;  
  
// Set up an array of valid ending types. 
let arrJoins = ['round', 'miter', 'bevel']; 
let i = 0, arrJoinsLength = arrJoins.length; 
  
for (i = 0; i < arrJoinsLength; i++){ 
  myContext.lineJoin = arrJoins[i]; 
  myContext.beginPath(); 
  myContext.moveTo(55, 60 + (i * 60)); 
  myContext.lineTo(95, 20 + (i * 60)); 
  myContext.lineTo(135, 60 + (i * 60)); 
  myContext.stroke(); 
} 
      </script> 
    </body> 
</html>

Related Topic