Question

How to join together two lines drawn on a canvas in JavaScript

Answer 1

<canvas id="canvas"></canvas>

<script type="text/JavaScript">   

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 13;
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 100);
ctx.lineTo(250, 10);
ctx.stroke();

/*
run:  
    
   
*/
  
</script>

 

70+ SQL courses for beginners and professionals

Answer 2

<canvas id="canvas"></canvas>

<script type="text/JavaScript">   

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 13;
ctx.lineJoin = "bevel";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(250, 100);
ctx.lineTo(250, 10);
ctx.stroke();

/*
run:  
    
   
*/
  
</script>

 

70+ SQL courses for beginners and professionals

Answer 3

<canvas id="canvas"></canvas>

<script type="text/JavaScript">   

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 13;
ctx.lineJoin = "miter";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(250, 100);
ctx.lineTo(150, 30);
ctx.stroke();

/*
run:  
    
   
*/
  
</script>

 

70+ SQL courses for beginners and professionals