lineJoin Property - Javascript Canvas Reference

Javascript examples for Canvas Reference:lineJoin

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. lineJoin

Description

The lineJoin property sets or gets the type of corner created, when two lines meet.

The Default value is miter.

JavaScript syntax 

context.lineJoin = "bevel|round|miter";

Property Values

Value Description
bevel Creates a beveled corner
round Creates a rounded corner
miter Default. Creates a sharp corner

Example

The following code shows how to create a rounded corner when the two lines meet:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();//  w w  w .  ja v a  2  s.  c o  m
ctx.lineWidth = 10;
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
ctx.stroke();

</script>

</body>
</html>

Related Tutorials